CSS 知识总结

浏览器渲染原理

1. HTML代码解析成DOM树
2. CSS代码解析成CSS树
3. 将DOM树和CSS树合并成render树
4. Layout(文档流、盒模型等，类似于素描搭结构)
5. Paint(给元素着色)
6. Compose(根据层叠关系将多个元素合成一个平面进行展示)

CSS 动画的两种做法（transition 和 animation）

• 具体写法查看MDN文档。
• 用处都是补充中间帧。核心要点都是关键帧。
• animation是transition升级版。因为animation比transition更方便写复杂的动画。使用transition写复杂动画往往需要搭配js编写。
• transition往往适用于简单动画即只有开始帧和结束帧。如果有中间帧，则需要搭配js编写代码。
• animation更适合复杂动画，使用百分数定义@keyframes时可以有无数帧。

对CSS的理解

编写CSS代码实际上就做了两件事。

1. 摆盒子
2. 写动画 从这两点出发

• 学好盒模型、文档流、常用布局方式就可以学会摆盒子。
• 动画则需要靠自己想象力或者设计师给了案例，一点点调试还原动画即可。 那么其他关于元素外形、颜色、大小等如何学习呢？
• 我的理解是用到即学，直接MDN查看文档即学即用，因为CSS太多这些细枝末节的属性了，我们应该抓住重点学习，而不是把所有CSS属性记牢。即使记牢了，也不知道如何实践使用。