标签：bfc 7.26 DOM 样式 元素 监听 记录 重绘 隐藏

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.

 

标签：bfc,7.26,DOM,样式,元素,监听,记录,重绘,隐藏
来源： https://www.cnblogs.com/zjj-study/p/13381335.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。