CSS知识总结

浏览器渲染过程

• 步骤

1. 根据HTML构建HTML树（DOM）
2. 根据CSS构建CSS树（CSSOM）
3. 将两棵树合并，构建渲染树（render tree）
4. Layout布局（文档流、盒模型、计算大小和位置）
5. paint绘制（把边框颜色、文字颜色、阴影等画出来）
6. compose合成（根据层叠关系展示画面）

• 三棵树

• 更新方式

CSS动画优化

• JS优化

使用requestAnimationFrame代替setTimeout或setLnterval

• CSS优化

使用will-change或translate

transform

四个常用功能

• translate 位移
• scale 缩放
• rotate 旋转
• skew 倾斜

transition 过渡

作用：补充中间帧

语法：transition： 属性名 时长 过渡方式 延迟

animation

缩写语法：animation：时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名

@keyframes语法

@keyframes xxx{
from{
transform:translateX(0%);
}
to{
transform:translateX(100%);
}
}

 @keyframes xxx{
0%{top:0;left:0;}
100%{top:100px;left:100%}
}