CSS 知识总结

浏览器渲染过程：

根据HTML构建HTML树(DOM)
根据CSS构建CSS树(CSSOM)
将两棵树合并成一颗渲染树(render tree)
Layout布局(文档流、盒模型、计算大小和位置
Paint绘制(把边框颜色、文字颜色、阴影等画出来
Compose合成(根据层叠关系展示画面)

tarnsform介绍

四个常用功能：
位移translate
缩放scale
旋转rotate
倾斜skew
一般都需要配合transition过渡
inline元素不支持transform,需要先变成block

transition过渡

transition直译为过渡，即给属性变化添加过渡效果

作用：补充中间帧

语法：

transition:属性名时长过渡方式延迟
transition: left 200ms linear
可以用逗号分隔两个不同属性
transition: left 200ms, top 400ms
可以用all代表所有属性
transition: all 200ms
过渡方式有: linear | ease | ease-in |ease-out | ease-in-out | cubic-bezier | step-start | step-end steps。
transition 可以同时给多个属性添加过渡效果，比如可以在移动元素的同时，改变其透明度。但不管有多少个属性同时在变化，这种过渡效果只能是一次性的，也就是单个动作。

animation方法

transition 只能做单个动作，如果动画包含多个动作，这时候就需要 animation

两个连续的线段有三个关键点，两个连续的动作必然也有三个关键帧（keyframe）。