CSS重绘与重排(回流)

重绘（repaint或redraw）

当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

重排（重构/回流/reflow）

当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。

重绘和重排的关系

在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。

重排的几种情况：

1、盒子模型相关属性
2、定位属性及浮动
3、改变节点内部文字结构
①. width , height , padding , margin , display , border-width , border , min-height
②. top , bottom , left , right ,position , float , clear
③. text-align , overflow-y , font-weight , overflow , font-family, line-height , vertival-vlign , white-space , font-size

重绘的几种情况：

color ， border-style , visibility ,text-decoration , background
background-image , background-position , background-repeat
background-size , outline-color , outline , outline -style , outline-width , box-shadow

本文用作记录
转载两个博主文章
安萌萌萌萌萌
sophia_little