7.26简单记录样式问题

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.