-
box-sizing:
默认值content-box，设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
可选值：border-box，将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值，不包含margin。大多数情况下，这使得我们更容易地设定一个元素的宽高。 -
BFC：
全称为 块格式化上下文 (Block Formatting Context) ，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 -
重绘、重排
Reflow （重排） 当涉及到DOM节点的布局属性发生变化时，就会重新计算该属性，浏览器会重新描绘相应的元素，此过程叫 回流（Reflow）。Repaint（重绘） 当影响DOM元素可见性的属性发生变化 (如 color) 时, 浏览器会重新描绘相应的元素, 此过程称为 重绘（Repaint)。
因此重排必然会引起重绘。 造成重排 调整窗口大小 字体大小 样式表变动 元素内容变化，尤其是输入控件 CSS伪类激活，在用户交互过程中发生 DOM操作，DOM元素增删、修改 width, clientWidth, scrollTop等布局宽高的计算 Repaint和Reflow是不可避免的，只能说对性能的影响减到最小，
给出下面几条建议：
1. 避免逐条更改样式。建议集中修改样式，例如操作className。
2. 避免频繁操作DOM。创建一个documentFragment或div，在它上面应用所有DOM操作，最后添加到文档里。设置display:none的元素上操作，最后显示出来。
3. 避免频繁读取元素几何属性（例如scrollTop）。
4. 绝对定位具有复杂动画的元素。绝对定位使它脱离文档流，避免引起父元素及后续元素大量的回流 -
选择器, 选择器 从右往左 解析
a、选择器类型
1、ID #id
2、class .class
3、标签 p
4、通用 *
5、属性 [type="text"]
6、伪类 :hover
7、伪元素 ::first-line
8、子选择器、相邻选择器b、权重计算规则
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。c、比较规则
1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较，前一等级相等才往后比。 不是直观的行内>内联>外部样式； ID>class>元素。之所以有这样的错觉，是因为确实行间为第一等的权重，所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后，所以覆盖掉了之前的。 在权重相同的情况下，后面的样式会覆盖掉前面的样式。 -
居中布局
水平居中
行内元素: text-align: center
块级元素: margin: 0 auto
absolute + transform(translateX)
flex + justify-content(调整内容使全行排齐): center垂直居中
line-height: height
absolute + transform
flex + align-items(排整齐): center
table水平垂直居中
absolute + transform(translateY)
flex + justify-content + align-items -
撑开父容器
通过增加尾元素清除浮动:after clear: both
创建父级 BFC
position: absolute/fixed
display: inline-block / table
float 元素
ovevflow !== visible
父级设置高度
