《CSS 知识总结》

一、.浏览器渲染原理

1.解析HTML→构建HTML树(DOM)

2.解析CSS→构建CSS树(CSSDOM)

3.讲两棵树合并成一颗渲染树(render tree)

4.Layout布局

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

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

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


三、其他任何你想写的。

边学边忘,忘了再学,学了再忘。

            ——没关系,已经习惯了