CSS全部知识点整理

css知识点整理，一张图带你完全了解相关内容，通过思维导图帮你提高效率，赶紧来试一试吧~

CSS

• 引入方式
  • 行内样式表（行内式）
  • 内部样式表（嵌入式）
  • 外部样式表（链接式）
    • <link rel="stylesheet" href="xxxx">
• Emmet语法
  • 生成Html标签
    • 标签名 Tab
      • 生成标签
    • 标签名*数量 Tab
      • 生成多个标签
    • 父标签>子标签 Tab
      • 同时生成父子标签
    • 兄弟标签名+兄弟标签名 Tab
      • 生成平级标签
    • .类名 Tab
      • 生成指定类名的div
    • #id名 Tab
      • 生成指定id的div
    • 元素名.类名 Tab
      • 生成指定类名的指定元素
    • 元素名#id名 Tab
      • 生成指定id名的指定元素
    • .类名$*数量 Tab
      • 生成多个类名带序号的div
    • 标签名{标签内的内容}
      • 生成指定内容的指定标签
  • 生成CSS样式
    • 样式首字母 Tab
      • 快速生成样式
• 选择器
  • 基础选择器
    • 标签选择器
      • 标签名 {}
    • 类选择器
      • .类名 {}
    • id选择器
      • #id名 {}
    • 通配符选择器
      • * {}
        • 表示所有标签
  • 复合选择器
    • 后代选择器
      • 父选择器 后代选择器 {}
        • 选择指定父元素下的子元素（包括孙子元素）
    • 子选择器
      • 父选择器>子选择器 {}
        • 选择与父元素直接相连的元素
    • 并集选择器
      • 选择器，选择器 {}
    • 伪类选择器
      • 链接伪类选择器
        • 选择器:link
          • 选择所有未被访问的链接
        • 选择器：visited
          • 选择所有被访问的链接
        • 选择器:hover
          • 选择鼠标指针位于其上的链接
        • 选择器:active
          • 选择活动链接（鼠标按下未弹起的链接）
        • 要按顺序书写
      • 焦点伪类选择器
        • 选择器:focus {}
  • CSS3新增选择器
    • 属性选择器
      • [属性名]
      • [属性名=属性值]
      • [属性名^=xxx]
        • 属性值以xxx开头的元素
      • [属性名$=xxx]
        • 属性值以xxx结尾的元素
      • [属性名*=xxx]
        • 属性值含有xxx的元素
    • 结构伪类选择器
      • E:first-child
        • 匹配父元素中的第一个子元素
      • E:last-child
      • E:nth-child(n)
    • 伪元素选择器
      • 利用css模拟html标签
      • E::before{ content: 'xxx'; } E::after{ content: 'xxx'; }
• 三大特性
  • 层叠性
    • 样式冲突遵循就近原则
  • 继承性
    • 子标签可以继承父标签的部分样式
  • 优先级
    • 
    • !important>行内选择器>id选择器>类选择器>元素选择器>通配符选择器或继承
    • 复合选择器权重叠加
• 元素显示模式
  • 分类
    • 块元素
      • 独占一行
      • 高度，宽度，外边距以及内边距可以控制
      • 宽度默认是父级的100%
      • 是一个容器及盒子，里面可以放行内或块级元素（<p>,<h1>-<h6>里面不能放块元素）
    • 行内元素（内联元素）
      • 一行显示多个
      • 宽高设置无效
      • 默认宽度是其内容的宽度
      • 只能放文本或其它行内元素
    • 行内块元素
      • 一行内显示多个
      • 默认宽度是其内容的宽度
      • 行内元素特点
      • 高度，宽度，外边距以及内边距可以控制
        • 块元素特点
  • 转换
    • display: block;
      • 转为块元素
    • display: inline;
      • 转为行内元素
    • display: inline-block;
      • 转为行内块元素
• 字体属性
  • 文字字体
    • font-family: Arial,"Microsoft YaHei";
  • 文字大小
    • font-size: 20px;
  • 文字粗细
    • font-weight: bold;
    • font-weight: 500;
  • 文字样式
    • font-style: italic;
  • 复合属性
    • font: italic bold 20px "Microsoft YaHei";
    • font:20px/1.5 "Microsoft YaHei";
• 文本属性
  • 文字颜色
    • color: red;
    • color: #ff0000;
    • color: rgb(255,0,0);
    • color: rgba(255,0,0,1);
  • 文本水平对齐
    • text-align: center;
  • 文字垂直居中
    • line-height行间距=盒子高度
  • 行内元素和行内块元素与文本垂直对齐方式
    • vertical-align: middle;
  • 文字装饰（下划线，上划线，删除线）
    • text-decoration: underline;
  • 文本首行缩进
    • text-indent: 2em;
  • 文本行间距
    • line-height: 26px;
  • 文字阴影
    • text-shadow: 10px 10px 10px 10px red;
• 背景属性
  • 背景颜色
    • background-color: red;
  • 背景图片
    • background-image: url(xxx);
  • 背景图片平铺方式
    • background-repeat: no-repeat;
    • background-repeat: repeat-y;
  • 背景图片位置
    • background-position: center center;
    • background-position: 20px 50px;
    • 精灵图
  • 背景图片固定
    • background-attachment: scroll;
      • 背景图像随对象内容滚动
    • background-attachment: fixed;
      • 背景图像固定
  • 背景图片相对于图片标签更好控制位置
  • 背景图片尺寸
    • background-size: 100px 100px;
  • 复合属性
    • background: red url("xxx") no-repeat fixed center center;
• 字体图标
  • 1.下载字体文件
  • 2.引入字体
    • /* 字体声明 */ @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?p4ssmb'); src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb') format('truetype'), url('fonts/icomoon.woff?p4ssmb') format('woff'), url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; }
  • 3.设置字体
    • font-family: 'icomoon';
  • 4.使用字体
• 盒子模型
  • 四大组成
    • 边框
      • 属性
        • 边框粗细
          • border-width: 10px;
        • 边框样式
          • border-style: dashed;
            • none 定义无边框。 hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。 ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。 inset 定义 3D inset 边框。其效果取决于 border-color 的值。 outset 定义 3D outset 边框。其效果取决于 border-color 的值。 inherit 规定应该从父元素继承边框样式。
        • 边框颜色
          • border-color: red;
        • 复合属性
          • border: red 10px dashed;
        • 相邻边框进行合并
          • border-collapse: collapse;
      • 边框宽度是向外扩的，会影响盒子大小
    • 内边距
      • padding: 10px;
      • 盒子如果指定长宽，内边距会撑开盒子，影响盒子大小 盒子如果不指定长宽，则盒子不会被撑开
    • 外边距
      • margin: 10px;
      • 盒子水平居中
        • 设置宽度，设置左右外边距为auto
      • 相邻上下外边距合并问题
        • 现象：相邻块元素的相邻外边距，以大的外边距为准
        • 解决方案：给一个盒子加外边距，不需要两个都加
      • 嵌套块元素外边距塌陷问题
        • 现象：父子垂直外边距重合时，设置子元素外边框， 会体现为父元素的外边框效果
        • 解决方案一：为父元素设置上下边框
        • 解决方案二：为父元素设置一个内边距
        • 解决方案三：为父元素设置 overflow: hidden;
    • 实际内容
  • 清除内外边距
    • * { margin: 0; padding: 0; }
  • 圆角边框
    • border-radius: 10px;
  • 盒子阴影
    • box-shadow: 10px 10px 10px 10px red;
  • 盒子尺寸计算
    • box-sizing: content-box;
      • 传统盒子模型 盒子宽度=width+内边距+边框
    • box-sizing: border-box;
      • 让盒子宽度=width，不算内边距和边框
• 浮动
  • 块元素纵向排列使用标准流，横向排列使用浮动
  • 父盒子一般采用标准流的块元素搭配使用
  • 语法
    • float: none;
      • 默认不浮动
    • float: left;
      • 左浮动
    • float: right;
      • 右浮动
  • 特性
    • 浮动的元素会脱离标准流
      • 浮动原先的位置会被标准流填充 但浮动不会压住下面标准流元素的文字
      • 浮动元素并不会压住前面的兄弟标准流
    • 浮动元素会一行内显示并且元素顶部对齐
    • 浮动的元素会具有行内块元素的特性
  • 清除浮动
    • 问题：有时候父元素无法明确定义高度（子元素是动态的）。当父元素不设置高度，子元素浮动，父元素高度将变为0.之后的标准流元素会跑到浮动元素下面
    • 使用浮动前提
      • 父级没有高度
      • 子盒子浮动了
      • 影响下面布局了
    • 方法
      • 额外标签法（隔墙法）
        • <div> <div style="float: left">浮动1</div> <div style="float: left">浮动2</div> <!--清除浮动，需要是块级元素--> <div style="clear: both"></div> </div> <div>之后元素</div>
      • overflow
        • <!--overflow清除浮动--> <div style="overflow: hidden"> <div style="float: left">浮动1</div> <div style="float: left">浮动2</div> </div> <div>之后元素</div>
      • 父盒子添加伪元素
      • 父盒子添加双伪元素
• 定位
  • 分类
    • 静态定位
      • position: static;
      • 特点
        • 默认形式，无定位
    • 相对定位
      • position: relative;
      • 特点
        • 相对元素原来的位置
        • 不会脱离标准流，继续保持原来的位置
    • 绝对定位
      • position: absolute;
      • 特点
        • 相对于祖籍元素进行定位
        • 没有祖籍元素或者祖籍元素没有定位，则以浏览器为基准
        • 以最近一级的有定位祖籍元素为参考点移动位置
        • 绝对定位会脱离标准流，不再占有原先的位置
        • margin: auto;会失效
        • 元素会具有行内块元素特性
        • 不会促发外边距合并问题
        • 会压住标准流文字（与浮动不同）
    • 固定定位
      • position: fixed;
      • 特点
        • 以浏览器的可视窗口作为参照
        • 绝对定位会脱离标准流，不再占有原先的位置
        • margin: auto;会失效
        • 元素会具有行内块元素特性
        • 不会促发外边距合并问题
        • 会压住标准流文字（与浮动不同）
    • 粘性定位
      • position: sticky;
      • 特点
        • 以浏览器的可视窗口为参照点移动元素
        • 占有原先的位置
  • 子绝父相
    • 父元素使用相对定位，保持标准流 子元素使用绝对定位，脱离标准流
  • 定位叠放次序问题
    • z-index: 100;
      • 越大越靠上
      • 只有定位的盒子才能用这个属性
• 显示与隐藏
  • display: none;
    • 隐藏后不会占有原来的位置
  • visibility: hidden;
    • 隐藏后保留原先的位置
  • overflow: hidden;
    • 溢出隐藏
• 技巧
  • CSS三角形
    • width: 0; height: 0; border: 50px solid transparent; border-left-color: pink;
  • 鼠标样式
    • cursor: pointer;
  • 去除表单轮廓线
    • outline: none;
  • 防止文本域拖拽
    • resize: none;
  • 图片底部空白缝隙
    • 原因：行内块元素会和文字的基线对齐
    • 方式一：vertical-align: bottom;
      • 改变图片与文字的对齐方式
    • 方式二：display: block;
      • 只有行内元素或行内块元素才会与文字基线对齐
  • 溢出文字显示省略号
    • 单行文字
      • /*强制一行内显示*/ white-space: nowrap; /*//超出部分隐藏*/ overflow: hidden; /*超出部分用省略号代替*/ text-overflow: ellipsis;
  • 布局技巧
    • margin负值用处
      • 消除重合边框宽度
• CSS3新特性
  • 滤镜
    • filter: blur(5px);
      • 图像模糊处理
  • calc函数
    • width: calc(100% - 80px);
  • 过渡效果
    • transition: 要过渡的属性 花费时间 运动曲线 何时开始;
    • transition: width 5s ease 1ms;
  • 动画
    • 动画定义
      • @keyframes move { 0% { transform: translateX(0px); background-color: #7bbfea; } 50%{ transform: translateX(500px) scale(.1); } 100% { transform: translateX(1000px); background-color: red; } }
    • 动画声明
      • /*指定动画名称*/ animation-name: move; /*动画持续时间*/ animation-duration: 5s; /*动画速度曲线*/ animation-timing-function: ease; /*何时开始*/ animation-delay: 1ms; /*重复次数*/ animation-iteration-count: infinite; /*是否倒放*/ animation-direction: alternate; /*动画结束后是否回到起始状态*/ animation-fill-mode: forwards;
      • /*动画运行状态*/ animation-play-state: paused;
  • 2D转换
    • 不会影响标准流
    • 移动
      • transform: translate(10px,20px);
    • 旋转
      • transform: rotate(45deg);
      • transform-origin: 20% 20%;
        • 旋转中心
    • 缩放
      • transform: scale(2,2);
  • 3D转换
    • 3D效果需要在父窗口开启透视
      • perspective: 500px;
    • 移动
      • translateZ(-100px)
      • translate3d(10px,10px,10px);
    • 旋转
      • rotateX(45deg);
      • rotateY(45deg);
      • rotateZ(45deg);
      • rotate3d(1, 1, 0, 45deg);
    • 子元素开启3D空间
      • transform-style: preserve-3d;
• 移动页面开发
  • 视口
    • 布局视口
      • 默认宽度980px
    • 视觉视口
    • 理想视口
      • <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  • 像素
    • 电脑端
      • 1px=1个物理像素
    • 手机端
      • 1px=1个物理像素×物理像素比
  • 两倍图
    • 准备的图片是实际需要尺寸的两倍， 以应对物理像素比
  • 初始化CSS
    • https://necolas.github.io/normalize.css/
    • -webkit-tap-highlight-color: transparent;
      • 消除移动端超链接点击背景颜色
    • -webkit-appearance: none;
      • 清除移动端默认样式
    • -webkit-touch-callout: none;
      • 手指长时间按屏幕不弹出菜单
  • 移动端开发方案
    • 单独制作移动端页面
    • 响应式页面
  • 流式布局（百分比布局）
    • 设置盒子宽度为百分比
  • flex布局
    • 特性
      • 父盒子flex布局后，子元素的float、clear和vertical-align属性失效
    • 父盒子属性
      • display: flex;
        • 设置flex布局容器
      • flex-direction: row;
        • 主轴方向
      • flex-wrap: wrap;
        • 子元素是否换行
      • flex-flow: row wrap;
        • 主轴方向和是否换行组合写法
      • justify-content: center;
        • 元素排列方式
      • align-items: center;
        • 侧轴单行子元素排列方式
      • align-content: space-between;
        • 侧轴多行子元素排列方式
    • 子盒子属性
      • flex: 1;
        • 从剩余空间中分配大小
      • align-self: center;
        • 自己在侧轴的排列方式
      • order: -10;
        • 排列顺序，默认为0，数值越小越靠前
  • rem适配布局
    • rem单位
      • em相对于父元素，rem相对于html元素
    • 媒体查询
      • 根据不同的屏幕尺寸设置不同的样式
      • 建议从小到大
      • @media screen and (min-width: 800px){ body { background-color: #7bbfea; } }
      • 媒体引入
        • <link rel="stylesheet" href="xxx" media="screen and (min-width:320px)">
    • less
      • 安装
        • npm install -g less
      • 变量定义
        • @color: pink;
      • 编译less
      • less嵌套
        • div { a { color: red; } }
        • 伪元素选择器
          • a { &:hover { color: red; } }
      • less运算
        • 加减乘除运算
    • rem适配方案
      • 使用媒体查询根据不同设备按比例设置html的字体大小， 然后页面元素使用rem做尺寸单位
      • 方案一
        • less
        • 媒体查询
        • rem
      • 方案二
        • flexible.js
        • rem
  • 响应式布局