前端面试--CSS篇

介绍下BFC及其应用

BFC块级格式化上下文，是页面盒模型中的一种CSS渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。
创建BFC的方式有：

1. html根元素；
2. float浮动；
3. 绝对定位；
4. overflow不为visible；
5. display为表格布局或弹性布局；

BFC的主要作用：

• 清除浮动；
• 防止同一BFC容器中的相邻元素的外边距重叠问题。

怎样让一个div水平垂直居中？

介绍下重流和重绘，以及如何进行优化？

浏览器渲染机制

• 浏览器采用流式布局模型；
• 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并产生了渲染树；
• 通过渲染树我们就可以知道所有节点的样式，计算出他们在页面上的大小和位置，最后把节点绘制到页面上；
• 由于浏览器使用流式布局，对渲染树的计算通常只需要遍历一次就可完成。（但是table及其内部元素除外，他们可能需要多次计算，通常花费3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一）

重绘
由于节点的集合属性发生改变或者由于样式改变而不会影响布局的，成为重绘。如：outline,visibility,color,background-color等，重绘的代价是比较高的，因为浏览器必须要验证DOM树上其他元素的可见性。
回流
回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或者整个页面）的布局更新。一个元素的回流可能会导致其子元素及DOM中紧随其后的节点、祖先节点元素的随后的回流。大部分的回流将会导致页面的重新渲染。
回流必定导致重绘，重绘不一定会引发回流。
减少重绘和回流
1、CSS。

• 使用transform代替top；
• 使用visibilty代替display：none，前者引起重绘，后者引起回流；
• 避免使用table布局；
• 尽可能在DOM树的末端改变class；
• 避免设置多层内联样式，CSS选择符从右向左查找，避免节点层级过多；
• 将动画效果应用到position：absolute或fixed的元素上，避免影响其他元素的布局；
• 避免使用CSS表达式，可能会引发回流；

2、javascript。

• 避免频繁的样式操作，修改class最好；
• 避免频繁操作DOM，合并多次修改为一次；
• 避免频繁读取