《CSS 知识总结》

一、.浏览器渲染原理

1.解析HTML→构建HTML树（DOM）

2.解析CSS→构建CSS树（CSSDOM）

3.讲两棵树合并成一颗渲染树（render tree）

image

4.Layout布局

根据render tree就可以进入Layout布局

Layout流程输出是一个盒模型，Layout计算每个对象的精确位置和大小。具体有三种更新方式：

image

image

5.Paint绘制

布局好了后，就可以将render tree里的每个对象转换成屏幕的实际像素，paint就是将各个节点绘制到屏幕上。

6.Composite合成

将已经paint的部分根据层叠关系把页面展示出来。

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

-transition 过渡

补充中间帧，再更改CSS属性控制动画速度，过渡必须要有起始，一般只有1次或者两次动画

-animation 动画

有两个部分：描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧

这里要使用@keyframes定义动画序列

例：

用transition写的爱心：

http://js.jirengu.com/sofuzalona/1/edit?html,css,output

用animation写的爱心：

http://js.jirengu.com/hatovucedi/edit?html,css,output

三、其他任何你想写的。

边学边忘，忘了再学，学了再忘。

        ——没关系，已经习惯了

作者：我是WilliamWang
链接：https://www.jianshu.com/p/ec3d249b379f
来源：
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。