【For Interview】css相关核心概念点浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中

重绘回流

浏览器的回流与重绘 (Reflow & Repaint)
回流与重绘：CSS性能让JavaScript变慢？

核心概念点浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。回流代价比重绘代价高，并且重绘不一定会引起回流，而回流一定会引起重绘。
下面这些方法会造成回流，因为浏览器清空了队列。
- clientWidth、clientHeight、clientTop、clientLeft (获取元素的内部width, 包括padding，但是不包括margin、border和滚动条)
- offsetWidth、offsetHeight、offsetTop、offsetLeft（获取元素的布局width, 包括padding 、border、滚动条）
- scrollWidth、scrollHeight、scrollTop、scrollLeft（内容实际宽度）
- width、height
- getComputedStyle() （获取计算后的样式值）
- getBoundingClientRect() （返回元素的大小及其相对于视口的位置）
优化（第二篇文章里面讲的很详细）
- 先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
- 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。
- 缓存要更改的样式，一次性回流

居中

水平垂直居中
这块平时也是用的时候才查找的，然后逐个试一下，不过这样容易在面试过程中被问倒。所以自己试试然后再整理一下。

水平居中

子元素宽度固定

这个说的是子元素的宽度固定，可以用transform

.container{
    width: 300px;
    height: 200px;
    background: pink;
    position: relative;
}
.inner{
    width: 100px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -50px;
    background: #fff;
    text-align: center;
}

其本质是将子元素的起点（也就是左上角）放置在了父元素的几何中心（top和left都是50%），然后通过 margin 设置为负值，具体参数是子元素宽高的一半，至此，强行将子元素摆正。当然上面也可以将margin换为

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

这样就不用手动算子元素的宽和高了。哦，你问margin: 0 auto不配有姓名吗？主要是margin只能保证水平居中，替换了一下结果是这样，但是我们这节说的就是水平，这样也符合预期

子元素宽度不固定

将子元素设置为inline-block，然后父元素相应修改

.container{
    width: 300px;
    height: 200px;
    background: pink;
    position: relative;
    text-align: center;
}
.inner{
    display: inline-block;
}

多个块状元素

使用上面刚讲的居中布局，就可实现

.container{
    width: 250px;
    height: 200px;
    background: pink;
    position: relative;
    text-align: center;
    padding: 20px;
}
.inner{
    display: inline-block;
    width: 5px;
    height: 150px;
    margin: 0 auto;
    background: #fff;
    text-align: center;
}

垂直居中

下面的html都是

<div id="parent">
  <div id="son"></div>
</div>

单行的文本

只适用于单行文本，看了参考的博客，说行内元素也行，但是并没有找到合适的结果

#parent{
    height: 150px;
    line-height: 150px;  /*与height等值*/
}

多行文本

#parent {  /*或者用span把所有文字包裹起来，设置display：inline-block转换成图片的方式解决*/
    height: 150px;
    line-height: 30px;  /*元素在页面呈现为5行,则line-height的值为height/5 */
}

博客这么说，感觉这种计算方式有点傻乎乎的

grid布局

核心代码就只有两行吧

.container {
    display: grid;
    place-items: center;
}

place-items代表的是<align-items> <justify-items>

table cell方式

#parent{
    display: table-cell;
    vertical-align: middle;
}

记住就好，用的时候在查

flex

#parent{
    display: flex;
    align-items: center;
}

这个一般面试官不会问的

position绝对定位方式

同上面水平布局方式一样，原理就是 absolute + translate