前端面试常问的基础（四）
将元素定义为网格容器，并为其内容建立新的 网格格式上下文。
值：
- grid ：生成一个块级网格
- inline-grid ：生成一个内联网格
在Bootstrap中，栅格系统将容器均分为12份，再调整内外边距，结合媒体查询，造就了这一强大的栅格系统。
flex布局
水平居中：
1. 行内元素，父元素 text-align : center
2. 块级元素有定宽，margin:0 auto;
3. 块级元素绝对定位，transform : translate（-50%，0）；
4. 块级元素绝对定位，并且知道宽度， margin-left: - 宽度的一半
5. 块级元素绝对定位，left:0; right:0; margin:0 auto
垂直居中
1. 若元素是单行文本, 则可设置 line-height 等于父元素高度，原理见上面；
2. 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央..parent::after, .son{ display:inline-block; vertical-align:middle; }
3. 使用flex, 在父元素上面添加.parent { display: flex; align-items: center;
4. 绝对定位的块用 transform: translate(0, -50%)
5. 绝对定位，并且有定高， margin-top : -高度的一半 注意不要用 margin-bottom, 不会生效的
6. 设置父元素相对定位(position:relative), 子元素如下css样式:.son{ position:absolute; height:固定; top:0; bottom:0; margin:auto 0; }
重绘重排
重绘是一个元素的外观变化所引发的浏览器行为；
重排是引起DOM树重新计算的行为；
1、回流/重排
渲染树的一部分必须要更新且节点的尺寸发生了变化，会触发重排操作。每个页面至少在初始化的时候会有一次重排操作。
2、重绘
部分节点需要更新，但没有改变其形状，会触发重绘操作。
会触发重绘或回流/重排的操作
1、添加、删除元素(回流+重绘)
2、隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)
3、移动元素，如改变top、left或移动元素到另外1个父元素中(重绘+回流)
4、改变浏览器大小(回流+重绘)
5、改变浏览器的字体大小(回流+重绘)
6、改变元素的padding、border、margin(回流+重绘)
7、改变浏览器的字体颜色（只重绘，不回流）
8、改变元素的背景颜色（只重绘，不回流）
深入浏览器理解CSS animations 和 transitions的性能问题
GPU的快在于：
- 绘制位图到屏幕上
- 一遍又一遍地绘制相同的位图
- 将同一位图绘制到不同位置，执行旋转以及缩放处理
GPU 的慢在于：
- 将位图加载到它的内存中
在使用height，width，margin，padding作为transition的值时，会造成浏览器主线程的工作量较重，例如从margin-left：-20px渲染到margin-left:0，主线程需要计算样式margin-left:-19px,margin-left:-18px，一直到margin-left:0，而且每一次主线程计算样式后，合成进程都需要绘制到GPU然后再渲染到屏幕上，前后总共进行20次主线程渲染，20次合成线程渲染，20+20次，总计40次计算。
在使用css3 transtion做动画效果时，优先选择transform，尽量不要使用height，width，margin和padding。
transform为我们提供了丰富的api，例如scale，translate，rotate等等，但是在使用时需要考虑兼容性。但其实对于大多数css3来说，mobile端支持性较好，desktop端支持性需要格外注意。
物理像素（physical pixel）
即：设备像素（device pixel）。
本质是屏幕上的点，这个是跟设备有关系
CSS像素（css pixel）
指的是CSS样式代码中使用的逻辑像素（或者叫虚拟像素）。
软件要在设备上显示，css规定了长度单位（绝对单位和相对单位），比如：px 是一个 相对单位 ，相对的是 物理像素（physical pixel）
设备像素比（device pixel ratio） dpr
公式：物理像素数（硬件） / 逻辑像素数（软件），即（物理像素/CSS像素）。
在css中，可以通过 -webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio 进行媒体查询，对不同dpr的设备，做一些样式适配。
如： dpr = 2 时，1个CSS像素 = 4个物理像素。因为像素点都是正方形，所以当1个CSS像素需要的物理像素增多2倍时，其实就是长和宽都增加了2倍
px em rem的区别
PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。
EM就是根据基准来缩放字体的大小。EM实质是一个相对值，而非具体的数值。这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。如WordPress官方主题Twenntytwelve的基准就是14px=1em。
另外，em是相对于父元素的属性而计算的，如果想计算px和em之间的换算，输入数据就可以px和em相互计算。
Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。
