标准盒子模型和ie模型
- 标准盒模型的width/height 不包含padding和border。
- ie 盒子模型的width/height 包含了padding和border。
- 设置 box-sizing: border-box；是ie 盒模型。
- box-sizing: content-box;是默认值，为标准盒模型。
- 标准盒模型会因为padiing被撑大，如果不想盒子因为padding被撑大就可以设置盒子box-sizing为border-box;
重绘和重排
重绘
重绘是一个元素外观的改变导致浏览器行为（例如改变visibility、outline、background等属性），浏览器会根据元素新的属性呈现新的外观。
重排
重排是DOM元素被js触发某种变化，渲染树需要重新计算。浏览器对DOM树进行重新排列；这便是重排。排列完成之后重新绘制元素则是重绘。
常见的触发重排的操作
- DOM元素的几何属性变化
- DOM树的结构变化（例如节点的增减、移动）
- 获取某些属性（例如offsetTop、offseLeft、offseHeight、offsetWidth、clientWidth、clienHeight等）
- 改变元素的一些样式（例如调整浏览器窗口的大小）
两者的区别
- 重绘不会带来重新布局，并不一定伴随着重排
在实际中，尽量减少重排次数和缩小重排影响范围，有以下几种方法：
- 将多次改变样式属性的操作，合成一次操作。
- 将需要多次重排的元素,嗯，position属性。设为absolute。或fixed。使其脱离文档流，这样，他的变化就不会影响到其他的元素。
- 在内存中多次操作节点。完成后再添加到文档中去。
- 如果对一个元素进行复杂的操作，可以将display属性设为none嗯使其隐藏。操作完后再显示。
- 在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量。
