CSS知识总结

浏览器渲染原理

• 根据HTML构建HTML树。(DOM)

• 根据CSS构建CSS树。(CSSOM)

• 两棵树合并成一颗渲染树。(render tree)

• Layout布局(文档流，盒模型，计算大小和位置)

• Paint绘制(把边框颜色，文字颜色，阴影等画出来)

• Compose合成(根据层叠关系展示画面)

js 更新样式经过

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

transition

• 位移translate
• 缩放scale
• 旋转rotate
• 倾斜skew

translate：

scale： rotate： skew：

animation

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

做一个会动的心

鼠标悬浮，心出现动画。