526互联

display:none和overflow:hidden的区别

发布时间 2023-10-07 16:09:11作者: Wanker

1、display:none

当将一个元素的display属性设置为none时，该元素将不会显示在网页中，并且不会占据任何空间。也就是说，该元素会完全隐藏，其他的元素会立即占据它原来的位置。该属性适用于需要完全隐藏某个元素的场景。

// html代码:完全隐藏子元素
   <div class="father">
      <div class="child">子元素</div>
    </div>
// css代码：为了更好观看结果，给他们加上背景颜色
  * {
        padding: 0;
        margin: 0;
      }
      .father {
        background-color: skyblue;
        height: 500px;
        width: 100%;
        border: 1px solid black;
      }
      .child {
        background-color: pink;
        height: 700px;
        width: 300px;
        display: none;
      }

2、overflow:hidden

当将一个元素的overflow属性设置为hidden时，它会裁剪超出其指定尺寸的内容，并且隐藏被裁剪的内容。该属性适用于需要限制元素内部内容溢出的场景。

// html代码：隐藏溢出的部分子元素
   <div class="father">
      <div class="child"></div>
    </div>
// css代码：
   * {
        padding: 0;
        margin: 0;
      }
      .father {
        background-color: skyblue;
        height: 500px;
        width: 100%;
        border: 1px solid black;
        overflow: hidden;
      }
      .child {
        background-color: pink;
        height: 700px;
        width: 300px;
      }

3、总结

（1）占据空间：display:none 渲染时不再占据任何空间，会让元素从DOM树中完全消失，而overfl:hidden会继续占据空间，只是溢出部分隐藏；

（2）回流与渲染：display:none会产生回流和重绘，而overfl:hidden不会；

（3）浏览器解析：display:none浏览器不会解析该元素，而overfl:hidden会。