如何写出更好的CSS？（CSS是从右往左进行解析）
①避免使用*(全局)选择器。（耗费性能）
②CSS选择器的层级不易过深，越少的话解析速度会越快（由于是从右往左，找到一个还要去找父级，肯定慢了，特别是后代选择器）
③利用css的继承
④css模块化：进行分组，一类的放一个文件
⑤尽量复用一些重复的CSS样式
⑥尽量使用简约、紧凑的语法（就是CSS的缩写，减少代码量，提高性能），就是比如padding-top、padding-bottom，这些属性可以写作一个padding概括了
⑦页面CSS书写顺序，按照定位、元素层级、浮动、边框、颜色、背景等要素书写
如：.someclass{
/* Positioning */
/* Display & Box Model */
/* Background and typography styles */
/* Transitions */
/* Other */
}
可以参考：https://www.ibm.com/developerworks/cn/web/1109_zhouxiang_optcss/
怎么样拆分组织CSS代码？
① 同类型的样式放在一个CSS文件
② 可以对页面的结构进行写CSS文件
什么时候用ID和什么时候用class
ID权重高，而且是唯一的，class具有普遍性
class尽量用在可复用上，用于样式定义
ID更多是用来做一些js操作
盒子模型
一些布局相关
flex布局：
rem布局：
BFC布局：
CSS3的一些新特性
CSS3边框：border-radius、box-shadow、border-image
CSS3背景：background-image、background-size、background-origin、background-clip
CSS3渐变：Linear Gradients和Radial Gradients，在background属性上使用
CSS3文本效果：text-shadow（文本阴影）、box-shadow、text-overflow（文本溢出时发生什么ellipsis是省略号）、word-wrap（换行break-word允许长文本换行）、word-break（单词拆分换行，break-all ，就是单词可以分开换行）
text-justify（text-align：justify用了这个才能用text-justify）
CSS3字体：设置@font-face 规则，里面有font-family和src
CSS3 2D转换：transform属性，里面有translate()（移动，根据X，Y轴）、rotate()（旋转，顺时针为正）、scale()（缩放，对应X，Y轴缩放多少）、skew()（倾斜）有skewX和skewY、matrix()（是上述的集合）这些方法
CSS3D转换：rotateX()、rotateY()
CSS过渡：transition（后面是最终的结果）有四个属性
一是过渡名称transition-property，
二是所花的时间transition-duration，
三是过渡效果的时间曲线transition-timing-function，默认是ease
四是过渡效果何时开始transition-delay，默认0
CSS3动画：@keyframes 规则 animation是使用它
@keyframesmyfirst{
from{background:red;}
to{background:yellow;}
}
animation是所有动画属性的集合
animation-name规定 @keyframes 动画的名称
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function规定动画的速度曲线。默认是 "ease"
animation-delay规定动画何时开始。默认是 0
animation-iteration-count规定动画被播放的次数。默认是 1
animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"
animation-play-state：是否正在运行或暂停
CSS3 多列： column-count、column-gap、column-rule-style、column-rule-width、column-rule-color、column-rule、column-span、column-width
CSS3：box-sizing属性（border-box）可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)
CSS3弹性布局
CSS3 多媒体查询：CSS3 根据设置自适应显示。
媒体查询可用于检测很多事情，例如：
viewport(视窗) 的宽度与高度
设备的宽度与高度
朝向 (智能手机横屏，竖屏) 。
分辨率
响应式布局：
最后我们来总结下响应式布局的实现原理
首先我们应该遵循移动端优先，交互和设计以移动端为主，pc则作为移动端的扩展，一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容（图片、多媒体）
1.响应式布局
1.Meta标签定义
2.使用MediaQueries适配对应样式
2.响应式内容
1.响应式图片
