1、选择器
常用的选择器有类选择器、标签选择器、ID选择器、伪类选择器、属性选择器等。
css权重即优先级顺序是：内联样式>ID选择器>伪类选择器>属性选择器>类选择器>标签选择器>*。
需要特别注意的是，“！important”会覆盖所有样式规则，即“！important”的优先级最高。
2、定位
定位有相对定位relative、绝对定位absolute、固定定位fixed，其中relative和absolute在移动端用的较多，fixed在移动端兼容有问题，在移动端替代fixed的方案是是absolute+内部滚动。
3、浮动
设置float为left或right就可以是元素脱离文档流，向左或向右浮动。一般在宫格模式布局是会用到，如果子元素全部浮动，则父元素崩塌，这时就需要清除浮动。清除浮动的方法有很多，常用的是给父元素设置overflow：hidden。
4、盒子模型
盒子模型是css布局的基础。常见的盒子模型有块级盒子block、行内盒子inline-block，盒子关键的属性有margin、padding、border、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可以实现页面的滑动切换效果。
7、动画animation
animation首先需要设置一个动画函数，然后以这个动画的方式来改变元素的css属性的辩护，动画可以被设置成永久循环演示。和transition相比，animation设置动画效果哼灵活更丰富，二者的另一个区别是，transition只能通过主动改变元素的css值才能出发动画效果，而animation一旦被应用就开始执行动画。
8、sprite图
对于大型站点，为了减少HTTP请求的次数，一般将常用的小图标排到一个大图中，页面加载时只需要请求一次网络，然后在css中通过设置background-position来控制显示所需的小图标。
9、字体图标iconfont
字体图标就是将常用的图标转化为字体资源存在文件中，通过css中引用该字体文件，然后可以直接通过控制字体的css属性来设置图标的样式。