盒子模型
包括外边距（margin），内边距（padding），边框（border），内容（content）。
标准盒子模型 width/height = content。
IE盒子模型 width/height = content + padding + border。
box-sizing: content-box; 的 width 不包括 padding 和 border。
box-sizing: border-box; 的 width 包括 padding 和 border。
margin重叠
- 水平边距永远不会重合
- 2个或以上的块级盒模型相邻的垂直margin会重叠
防止外边距重叠解决方案：
外层元素padding代替
外层元素 overflow: hidden;
内层元素绝对定位 postion: absolute；
内层元素 加float: left; 或 display: inline-block;
内层元素透明边框 border: 1px solid transparent;
垂直水平居中的实现方式:
-
父级设置
text-align: center和line-height等同高度。 -
子节点绝对定位，设置
position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); -
子节点绝对定位，需要设置宽度和高度。设置
position: absolute;top:0;left:0;right:0;bottom:0;margin:auto; -
父级设置
display: table，子节点设置display:table-cell;text-align:center;vertical-align:middle; -
父级设置
display: flex;justify-content:center;align-items:center; -
父节点设置
display: grid;，子节点设置：align-self:center;justify-self: center;
html渲染过程
-
HTML被HTML解析器解析成DOM Tree, CSS则被CSS解析器解析成CSSOM Tree。
-
DOM Tree和CSSOM Tree解析完成后，被附加到一起，形成渲染树（Render Tree）。
-
节点信息计算(重排)，即根据渲染树计算每个节点的几何信息(布局)。
-
渲染绘制(重绘)，即根据计算好的信息绘制整个页面。
减少回流和重绘
-
批量修改DOM或者样式
-
不要在循环里读取节点的属性值
-
css3硬件加速（GPU加速）
-
尽量使用
visibility替代display:none
移动端1px问题
-
dpr(设备像素比)动态计算
-
viewport + rem 实现；
-
box-shadow模拟边框；
-
伪类 + transform:scaleY(0.5) 实现；
-
背景图
animation 和 transition 的区别
-
transition是过度属性，强调过度，他的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。
-
animation是动画属性，他的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。他也类似于flash的补间动画，但是他可以设置多个关键帧（用@keyframe定义）完成动画。
介绍下flex布局
Flex是Flexible Box的缩写，意为”弹性布局”，通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
主轴方向：水平排列（默认） | 水平反向排列 | 垂直排列 | 垂直反向排列
flex-direction: row | row-reverse | column | column-reverse;
换行：不换行（默认） | 换行 | 反向换行(第一行在最后面)
flex-wrap: nowrap | wrap | wrap-reverse;
flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
flex-flow: || ;
主轴对齐方式：起点对齐（默认） | 终点对齐 | 居中对齐 | 两端对齐 | 分散对齐
justify-content: flex-start | flex-end | center | space-between | space-around;
侧轴对齐方式（单行） ：拉伸对齐（默认） | 起点对齐 | 终点对齐 | 居中对齐 | 第一行文字的基线对齐
align-items: stretch | flex-start | flex-end | center | baseline;
侧轴线对齐方式（多行） ：拉伸对齐（默认） | 起点对齐 | 终点对齐 | 居中对齐 | 两端对齐 | 分散对齐
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
子项常见属性：
- flex子项目占的分数
- align-self控制子项自己在侧轴的排列方式
- order 属性定义子项目的排列顺序（前端顺序）
