CSS知识总结

一、浏览器渲染原理

步骤

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

如何更新样式

-一般我们采用js来更新样式；如

div.style.background='red';
div.style.display='none';
div.remove()   //直接删掉节点

对应不同的方式，浏览器会有不同的渲染方式：

1. js/css > 样式 > 布局 > 绘制 > 合成（如div.remove()）

JavaScript > style > layout > paint > composite

2. js/css > 样式 > 绘制 > 合成（如background）

JavaScript > style > paint > composite

3. js/css > 样式 > 合成（如transform）

JavaScript > style > composite

二、CSS动画的两种做法

（一）transition

transition作用：补充中间帧，语法：

transition: 属性名 时长 过渡方式 延迟；
transition:left 200ms,linear 3s;   /*可以用逗号分隔*/ 
transition:left 200ms linear 3s;  
transition:all 200ms;              /*可以用all表示所有属性*/

过度方式有：linear（线性变化）| ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps

注：并不是所有属性都可以过渡 display:none => block无法过渡，一般改成： visibility:hidden => visible

（二）anmition

anmition：声明关键帧，添加动画；语法：

animtion:时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名；

• 时长1s或1000ms
• 过渡方式：根transition一样
• 方向：reverse | alternate | alternate-reverse
• 次数：3或者2.4或者infinite
• 填充模式：none | forwards | backwards | both
• 是否暂停：paused | running
• 以上属性都有对应的单独属性

两种方式：

#demo.start{animation:xxx 1.5s}

@keyframes xxx{
    0%{transform:none;}
    33%,66%{transform:translate(10px,-20px);}
    100%{transform:translate(100px,-100px);}
}  /*百分比写法*/

@keyframes xxx{
    from{transform:none;}
    to{transform:translateX(10px);}
}  /*from……to……写法*/

【注】： 在`chrome`开发者工具里面任何一标签选中按下esc进行如下操作

可以观察到浏览器对网页的渲染。亮起绿色表示正在进行渲染，对于不同的操作，浏览器进行渲染的程度以及快慢进行对比，可以对程序进行优化。具体运行请看网站：https://csstriggers.com/;

三棵渲染树的图解如下：