CSS知识总结
一、浏览器渲染原理
- 处理HTML标记并构造 DOM 树。
- 处理CSS并构建CSSOM树。
- 将DOM和CSSOM组合成一个Render树。
- 在渲染树上运行布局，确定节点的宽高和位置。
- 将各个节点绘制到屏幕上面。
- 合成，根据层叠关系展示画面。
MDN详细介绍：https://developer.mozilla.org/zh-CN/docs/Web/Performance/How_browsers_work#%E6%B8%B2%E6%9F%93
二、CSS动画的两种做法
transition
过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。
关键字：none, all, css属性值；
display:none => block 不能过渡，一般改成：visibility:hidden => visible
animation
@keyframes写法
@keyframes identifier {
0% { top: 0; left: 0; }
30% { top: 50px; }
68%, 72% { left: 50px; }
100% { top: 100px; left: 100%; }
}
@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
缩写语法： animation: 时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名
学习CSS的正确方法！！！
MDN+动手尝试+记忆
