css知识回顾

以下知识摘自奇舞周刊的公众号内容~
本文知识点：

• html的样式修改方式
• 页面渲染机制
• css工作流程
• 重排与重绘

1. html的样式修改方式（3种方式）

1） 内部样式（写在标签内部）
2） 内联样式（写在HTML标签中）
3） 外部样式（写在css文件中，引入到HTML里）

2.页面渲染机制（5个步骤）

1） 处理HTML来创建DOM tree
2） 处理CSS来创建CSSOM tree
3） 根据DOM跟CSSOM来合并render tree
4） 根据render tree来布局
5） 绘制render tree

3.css工作流程

即把css规则定义到Dom tree上

4.重绘和重排

• 重排（reflow）：render tree的重新构建（即当页面布局或者Dom元素的几何属性发生改变时，就会发生浏览器重排）
  以下情况会引发浏览器重排：
  1）页面渲染初始化
  2）Dom元素的增删
  3）Dom元素的位置，尺寸以及引起尺寸变化的内容改变
  4）resize事件发生时
• 重绘（repaint）: render tree中只影响外观而不影响风格的属性改变，如：color与background-color的改变