7.25 面经。怕忘记记录一下比较常见的一些样式问题
1. margin外边距重叠问题：因为bfc的特性，同一个bfc容器的元素会发生，但是两个bfc容器不会
1. 能产生bfc
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
2. 包含浮动：如果盒子没给高度，里面有浮动元素，因为浮动元素脱标，盒子如果有边框就只有2px的边框，触发bfc就能清除浮动，把元素包裹在里面
3. 左或者右自适应：一个盒子左右两个元素，左边左浮动右边正常，左边会遮盖右边，触发bfc然后左边固定宽度右边自适应或者也固定宽度也不会被遮盖
2. Div水平垂直居中：
1. 绝对定位+transform
2. 绝对定位方法+margin
3. 绝对定位方法：绝对定位下top left right bottom 都设置0
4. flex
5. table-cell实现水平垂直居中: table-cell middle center组合使用
3. 隐藏元素
1. ### display: none;
1. DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间；
2. 事件监听：无法进行 DOM 事件监听；
3. 性能：动态改变此属性时会引起重排，性能较差；
4. 继承：不会被子元素继承，毕竟子类也不会被渲染；
5. transition：transition 不支持 display。
2. ### visibility: hidden;
1. DOM 结构：元素被隐藏，但是会被渲染不会消失，占据空间；
2. 事件监听：无法进行 DOM 事件监听；
3. 性 能：动态改变此属性时会引起重绘，性能较高；
4. 继 承：会被子元素继承，子元素可以通过设置 visibility: visible; 来取消隐藏；
5. transition：visibility 会立即显示，隐藏时会延时
3. ### opacity: 0;
1. DOM 结构：透明度为 100%，元素隐藏，占据空间；
2. 事件监听：可以进行 DOM 事件监听；
3. 性 能：提升为合成层，不会触发重绘，性能较高；
4. 继 承：会被子元素继承,且，子元素并不能通过 opacity: 1 来取消隐藏；
5. transition：opacity 可以延时显示和隐藏
4. 重绘和回流
1. 重绘：会验证节点可见性
2. 回流：布局或者几何大小改变引起，一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。
**回流必定会发生重绘，重绘不一定会引发回流。**
5. 浏览器渲染机制：
1. 浏览器把html解析成dom树，css解析成cssom，这两个合并成render tree
2. 通过render tree就知道所有节点的样式，计算节点在页面的大小和位置，然后放在页面
6.