CSS 知识总结

149

这个星期回顾了一下CSS的知识,对于CSS的学习,是最重要的还是不懂得就上MDN查,其次就是多练习每个属性,所以,我们要了解的是浏览器的渲染原理和CSS动画。

浏览器的渲染原理

首先推荐这两篇篇文章:渲染树构建、布局与绘制渲染性能,在了解完以后,我来介绍一下浏览器渲染过程:

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

CSS动画

CSS动画通常通过transform,animation,transform有4个常用的功能:

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

CSS过渡

CSS过渡属性是transition,其作用是补充中间帧,下面我来介绍其语法:

  • transtion: 属性名 时长 过渡方式 延迟
  • 可以用逗号分隔两个不同的属性,例如:transition:top 200ms,left 100ms