欢送来到程序员科技岛，各种性能接口，技术文档随你挑！
详情请拜访昂焱数据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属性来设置图标的款式，字体图标的益处是其不受屏幕分辨率的影响，并且能够任意批改图标的色彩。