CSS 知识总结

个人学习使用

浏览器渲染原理

---

了解浏览器的渲染原理，首先要了解浏览器渲染的过程，步骤如下：
1. 构建HTML树（DOM）
2. 构建CSS树（CSSOM）
3. 将DOM和CSSOM合并成渲染树（render tree）
4. layout布局渲染
5. paint绘制渲染
6. compose合成
并不是每次渲染都会严格按照这个步骤执行，layout布局，paint绘制为可选执行项。
有三种渲染模式
1. JS/CSS>样式>布局>绘制>合成
2. JS/CSS>样式>绘制>合成
3. JS/CSS>样式>合成
触发第一种，如div.remove()；
触发第二种，如改变颜色；
触发第三种，如使用transform

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

---

css动画有两种基本用法，一种是用transform绘制结束时样式，再用transition来控制变化的时间和曲线。
另一种是使用animation，用@keyframes创建一个动画，并设置关键帧，如

div
{
	animation:xxx 5s infinite;
}
@feyframes xxx{
	0%{ top:0 left:0 }
	30% { top:10px}
	60%{ left:30PX}
	90%,100%{top:50px, left: 20px} 
}

或者

@keyframes xxx
{
	from {left:0px;}
	to {left:200px;}
}

其他任何你想写的。

---

css 动画中的一些优化方式：
使用requestAnimationFrame代替setTimeout或setinterval
使用will-change或translate

inline元素不支持transform，需要先转化为block元素

不是所有属性支持元素过渡
display：none -> block 不支持，可以改为visibility:hidden -> visible