共计 1585 个字符，预计需要花费 4 分钟才能阅读完成。
欢送来到程序员科技岛，各种性能接口，技术文档随你挑！
详情请拜访昂焱数据 https://www.ayshuju.com/
1、CSS 选择器
css 的选择器有很多种，罕用的有类选择器、标签选择器、ID 选择器、后辈选择器、群组选择器、伪类选择器(before/after)、兄弟选择器(+~)、属性选择器等等。
2、定位 position
定位个别有绝对定位(relative)、相对定位(absolute)、固定定位(fixed)，relative 和 absolute 在挪动端用的最多，fixed 在挪动端有兼容性问题，因而不举荐应用，在挪动端代替 fixed 的计划是 absolute+ 外部滚动。
3、浮动 float
设置 float 为 left 或 right，就能使该元素脱离文档流，向左或向右浮动。个别在做宫格模式布局时会用到，如果子元素全副设置为浮动，则父元素是塌陷的，这时就须要革除浮动，革除浮动的办法也很多，罕用的办法是在元素开端加空元素设置 clear:both, 更高级一点的就给父容器设置 before/after 来模仿一个空元素，还能够间接设置 overflow:auto/hidden。除过浮动能够实现宫格模式，行内盒子 (inline-block) 和 table 也能够。
4、盒子模型 Box
盒子模型是 css 最重要的一个概念，也是 css 布局的基石。常见的盒子模型有块级盒子 (block) 和行内盒子(inline-block)，盒子最要害的几个属性包含 margin、border、padding 和 content, 这几个元素能够设置盒子和盒子之间的关系以及盒子和内容之间的关系。还有一个问题是计算盒子的大小，须要留神的是，box-sizing 属性的设置会影响盒子的 width 和 height。只有一般文档流中块框的垂直外边距才会产生外边距合并。行内框、浮动框或相对定位之间的外边距不会合并。
5、弹性布局 Flex
Flex 布局的容器是一个伸缩容器，首先容器自身会更具容器中的元素动静设置本身大小；而后当 Flex 容器被利用一个大小时（width 和 height），将会主动调整容器中的元素适应新大小。Flex 容器也能够设置伸缩比例和固定宽度，还能够设置容器中元素的排列方向（横向和纵向）和是否反对元素的主动换行。有了这个神器，做页面布局的能够不便很多了。留神，设为 Flex 布局当前，子元素的 float、clear 和 vertical-align 属性将生效。
6、过渡 Transition、旋转 Transform
利用 transform 能够对元素进行平移 (translate)、旋转(rotate)、放大放大(scale)、歪斜(skew) 等解决，而 transition 使 css 属性值 (包含 transform) 在一段时间内平滑的过渡。应用 transition 和 transform 就能够实现页面的滑动切换成果。
7、动画 Animation
Animation 首先须要设置一个动画函数，而后以这个动画的形式来扭转元素的 css 属性之的变动，动画能够被设置为永恒循环演示。和 transition 相比，animation 设置动画成果更灵便更丰盛，二者还有一个区别是：transition 只能通过被动扭转元素的 css 值能力触发动画成果，而 animation 一旦被利用，就开始执行动画。
8、雪碧图 sprite
对于大型站点，为了缩小 http 申请的次数，个别会将罕用的小图标排到一个大图中，页面加载时只需申请一次网络，而后在 css 中通过设置 background-position 来管制显示所须要的小图标。
9、字体图标 iconfont
所谓字体图标就是将罕用的图标转化为字体资源存在文件中，通过在 CSS 中援用该字体文件，而后能够间接通过管制字体的 css 属性来设置图标的款式，字体图标的益处是其不受屏幕分辨率的影响，并且能够任意批改图标的色彩。