CSS知识总结（浏览器渲染原理及CSS动画）

《CSS知识总结》

这一周学习了有关CSS的相关知识，在此做一篇知识总结，来梳理一下CSS中的重要知识，本博客将包含以下几个内容：

• 浏览器渲染原理
• CSS动画的两种做法（transform和animation）
• 其他内容

浏览器的渲染原理

浏览器在对网页进行渲染的时候，一定会经历以下六个步骤：

• 根据html构建html树（DOM）
• 根据CSS构建CSS树（CSS DOM）
• 合并，变成渲染树（render tree）
• Layout布局（文档流、盒模型、计算大小和位置）
• Paint绘制（边框颜色、文字颜色、阴影画出来）
• Compose合成（根据层叠关系展示画面）
  首先，我们应该要理解树是什么概念，下面放张图就可以非常清楚的知道了：
  

如上图中所示，通过分叉图的方式，将html与css中的标签和属性的父子关系展现出来的分叉形式，就是DOM树。
浏览器通过收到的html和css代码，分解成这样的两棵树后，再对其进行合并，成为渲染树（render tree），之后又会计算其中文档流、盒模型的大小和位置，计算完成后则会对文档流、盒模型等进行上色处理，处理完成后则是会对所有内容根据它的层叠关系来展示画面，这也就是我们看到的画面。
以上内容是参考这篇文章：https://web.dev/critical-rendering-path-render-tree-construction/， 大家也可以去了解一下。

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

transform和animation可能是最常用的两种制作CSS动画的方式了，首先先来了解transform如何来实现动画。

transform

首先,我们需要了解transform有哪些属性，常用的属性有以下四种：

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

translate 位移

translate有以下几种用法：

transform:translateX(50px);(向X方向向左移动50px)
transform:translateY(50px);(向Y方向向下移动50px)
transform:translateZ(50px);(