重绘：当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素。
重排：当变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素。
根据浏览器的加载顺序：（所以重排一定会引起重绘）
1、构建DOM树（parse）：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括js生成的标签）生成内容树（Content Tree/DOM Tree）；
2、构建渲染树（construct）：解析对应的CSS样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如），构建渲染树（Rendering Tree/Frame Tree）；
3、布局渲染树（reflow/layout）：从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标；
4、绘制渲染树（paint/repaint）：遍历渲染树，使用UI后端层来绘制每个节点。
行内元素：
a、b、small、strong、i、img、input、textarea、span
块级元素：
标题类h1、h2...，列表类ul、ol、li，表格类table、tbody、thead、th...，段落p、div
区别:
a.位置占据上不同
行内元素会在一条直线上排列，都是同一行的，水平方向排列
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
b.包含关系不同
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
c.盒模型属性上不同
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
进一步提问：img是行内元素为何可以设置宽高？
因为img是置换元素，浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如浏览器会根据
这两个值是CSS3中新增加了box-sizing属性的取值，简单来说border-box代表IE盒子模型，content-box代表W3C盒子模型
9.伪元素和伪类？伪元素：
在不增加dom结构的基础上添加的一个元素，在用法上跟真正的dom无本质区别。普通元素能实现的效果，伪元素都可以。有些用伪元素效果更好，代码更精简。常见的伪元素选择器包括：
:first-letter 选择元素文本的第一个字（母）。
:first-line 选择元素文本的第一行。
:before 在元素内容的最前面添加新内容。
:after 在元素内容的最后面添加新内容。
伪类分为两类：
状态伪类：
基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。常见的状态伪类主要包括：
:link 应用于未被访问过的链接；
:hover 应用于鼠标悬停到的元素；
:active 应用于被激活的元素；
:visited 应用于被访问过的链接，与:link互斥。
:focus 应用于拥有键盘输入焦点的元素。
结构性伪类：
利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。常见的包括：
:first-child 选择某个元素作为第一个子元素；
:last-child 选择某个元素作为最后一个子元素；
:nth-child() 选择某个元素作为一个或多个特定的子元素；
:nth-last-child() 选择某个元素作为一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
如果该属性是默认继承属性，该值等同于 inherit
如果该属性是非继承属性，该值等同于 initial
以下是默认继承属性：
所有元素可继承：visibility 和 cursor
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
表格元素可继承：border-collapse