CSS知识点总结

浏览器渲染原理

浏览器的渲染过程如下

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

如何更新样式？

通常用JS来更新样式

1. 比如div.style.background='red'
2. 比如div.style.display='none'
3. 比如div.classList.add('red')(有经验的更喜欢这种方式，因为代码量少，可用样式多)
4. 比如div.remove()直接删掉节点 推荐一个查看几种主流浏览器更新方式的网站

CSS动画的两种做法

transition

transition的作用是补充中间帧，通常语法：transition: <属性名> <时长> <过渡方式> <延迟>
可以用,分隔两个不同属性，可以用all代表所有属性。需要注意的是：并不是所有属性都能过渡，比如：

• display: none => block 没法过渡，一般改成visibility: hidden => visible
• background和opacity可以过渡吗？建议可以自己实践一下。

animation

animation通常和@keyframes配合使用。通常语法：animation: <时长> <过渡方式> <延迟> <次数> <方向> <填充模式> <是否暂停> <动画名>;

CSS碎碎念

CSS是一个不太讲逻辑，相对更讲想象力和艺术的语言。很多语法都搞不清背后原理，三言两语更是讲不明白，想要熟练掌握CSS，只有通过不停的实验和项目实践，可以说是一个吃经验的活儿。

我的CSS资源库

1. 自己做的CSS各种demo
2. MDN文档 (这个还是最靠谱)
3. CSS trigger