盒子模型

getComputedStyle()

getBoundingClientRect()

scrollTo()

修改样式的时候，最好避免使用上面列出的属性，他们都会刷新渲染队列。如果要使用它们，最好将值缓存起来。

重绘 repaint

某些元素的样式如颜色改变，但不影响其在文档流中的位置，浏览器会对元素重新绘制

不再执行布局阶段，直接进入绘制阶段

合成

利用transform、opacity和filter可实现合成效果，即GPU加速

避开布局分块和绘制阶段

优化

最小化重绘和重排：样式集中改变，使用添加新样式类名使用 absolute或 fixed使元素脱离文档流(制作复杂动画时对性能有影响)

开启GPU加速。利用css属性transform opacity will-change等，比如改变元素位置，使用translate会比使用绝对定位改变其left或top更高效，因为它不会触发重排或重绘，transform使浏览器为元素创建一个GPU

图层，这使得动画元素在一个独立的层中进行渲染，当元素内容没有改变就没必要进行渲染。

使用 visibility替换 display: none，因为前者只会引起重绘，后者会引发回流（改变了布局）

DOM 离线后修改，如：先把 DOM 设为display:none(有一次 Reflow)，然后修改再显示，只会触发一次回流不要把 DOM 结点属性值放在一个循环当成循环里的变量

不要使用 table 布局，可能很小的一个小改动会造成整个 table 重新布局动画实现速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame

CSS 选择符从右往左匹配查找，避免节点层级过多频繁运行的动画变为图层，图层能够阻止该节点回流影响别的元素。比如对于 video 标签，浏览器会自动将

该节点变为图层通过documentFragment创建一个DOM文档片段，在它上面批量操作DOM，完成后再添加到文档中，只触

发一次回流

documentFragment不是真实DOM的一部分，它的变化不会触发DOM树的重新渲染，不会导致性能问题

效果不甚明显，因为现代浏览器会使用队列存储储存多次修改进行优化

盒子模型

1、盒模型宽度的计算

（1）普通盒模型

默认盒子属性：box-sizing: content-box;

width只包含内容宽度，不包含border和padding

box-sizing: content-box;//定义引擎如何计算元素的总高度和总宽度

content-box 默认值，元素的 width/height 不包含padding，border，与标准盒子模型表现一致 border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致

inherit 指定 box-sizing 属性的值，应该从父元素继承

（2）怪异盒模型

设置语句：box-sizing: border-box;

offsetWidth = width（padding 和 border 都೿压到内容里面）

width 和 height 包括内容区、padding 和 border，不算 margin

3、margin 负值问题

margin-top 和 margin-left 是负值，元素会向上或者向左移动

margin-right 负值，右侧元素左移，自身不受影响

margin-bottom 负值，下侧元素上移，自身不受影响

4、BFC

Block Format Context：块级格式化上下文

一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素

形成 BFC 的条件：

float 不设置成 none position 是 absolute 或者 fixed

overflow 不是 visible display 是 flex 或者 inline-block 等

应用：清除浮动

5、float

（1）圣杯布局和双飞翼布局

作用：

实现 pc 端三栏布局，中间一栏最先渲染实现两边宽度固定，中间自适应

效果图：

（2）圣杯布局

HTML：

<div class="left float"></div> <div class="right float"></div>

</div>

CSS：

.container { padding: 0 200px;

background-color: #eee;

}

/* 清除浮动 */ .clearfix::after {

content: '';

display: table;

clear: both;

}

/* 关键 */ .float {

float: left;

}

.main { width: 100%;

height: 200px;

background-color: #ccc;

}

.left { width: 200px;

height: 200px;

/* ---关键--- */ position: relative;

right: 200px;

margin-left: -100%;

/* ---关键--- */ background-color: orange;

}

.right { width: 200px;

height: 200px;

/* ---关键--- */ margin-right: -200px;

（3）双飞翼布局

HTML：

<div class="float wrapper"> <div class="main"></div>

</div> <div class="left float"></div>

<div class="right float"></div>

CSS：

/* 关键 */ .float {

float: left;

}

.wrapper { width: 100%;

height: 200px;

background-color: #ccc;

}

/* 关键 */ .wrapper .main {

height: 200px;

margin-left: 200px;

margin-right: 200px;

}

.left { width: 200px;

height: 200px;

/* 关键 */ margin-left: -100%;

background-color: orange;

}

.right { width: 200px;

height: 200px;

/* 关键 */ margin-left: -200px;

background-color: skyblue;

（5）手写clearfix

CSS：

/* 1、父级标签定义伪类 */ .clearfix::after {

content: '';

display: table;

clear: both;

} /* 兼容IE低版本 */

.clearfix { *zoom: 1;

}

/* 2、父级标签 overflow */ .clearfix {

overflow: hidden;

}

/* 3、添加空 div 标签 */ .clearfix {

clear: both;

}

6、元素居中

（1）行内元素水平垂直居中

设置父级标签。

水平居中： text-align: center

垂直居中： line-height：盒子高度

（2）块级元素水平垂直居中

水平垂直都居中

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%，-50%)

不会触发重排，因此最常用

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

容器设置：

display：flex;

justify-content: center;

align-items: center;

容器：

display: table-cell;

text-align: center;

vertical-align: middle;

子元素：

display: inline-block;

7、样式单位

em：相对于自身字体大小的单位 rem：相对于 html 标签字体大小的单位

vh：相对于视口高度大小的单位，20vh == 视口高度/10020 vw：相对于视口宽度大小的单位, 20vw == 视口宽度/10020