CSS学习（一）

说一说css盒模型
css盒模型就是用来装页面上的矩形区域，包括传统的W3C盒模型和IE盒模型。
标准盒模型：

IE盒模型：

都包括外边距margin，边框border，内边距padding，主要内容content。
主要区别：标准盒模型的width和height是content的width和height，IE盒模型的width和height是上下border+padding+content。

link标签和import标签的区别
1.link标签是属于HTML的标签，import是css提供
2.link标签随着页面加载一同加载，import则是页面加载后被加载。
3.link是HTML标签，没有兼容性，import需要IE5以上
4.link的样式权重高于import。

transition和animation的区别
两者都是css动画属性。animation的name属性设置名字，delay设置开始状态，time-function设置动画的速度曲线，fill-mode 设置动画停了之后位置什么状态。transition的delay设置开始状态，time-function设置动画速度曲线，porpoty设置过渡效果。
　1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；
　2、animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；
　3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；
　4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；
　5、在性能方面：浏览器有一个主线程和排版线程；主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；我们在用使用 aniamtion 的时候这样就可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了；