CSS 隐藏元素方式 | TryCoding.Fun

CSS 隐藏元素方式

display:none、visibility:hidden、opacity:0、height:0 的区别与使用场景

问题

CSS 实现隐藏元素有哪几种方式？它们有什么区别？

解答

1. display: none

.hidden {
  display: none;
}

元素从文档流中完全移除
不占据空间
子元素也会被隐藏
无法触发事件
会触发重排（reflow）

2. visibility: hidden

.hidden {
  visibility: hidden;
}

元素不可见，但仍占据空间
子元素可以通过 visibility: visible 单独显示
无法触发事件
只触发重绘（repaint）

3. opacity: 0

.hidden {
  opacity: 0;
}

元素完全透明，仍占据空间
子元素无法单独显示
可以触发事件
只触发重绘
支持动画过渡

4. height: 0 + overflow: hidden

.hidden {
  height: 0;
  overflow: hidden;
}

元素高度为 0，不占据垂直空间
可能仍有 padding、border 占据空间
无法触发事件
会触发重排
支持动画过渡

完整对比示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      margin: 10px;
      background: #3498db;
      display: inline-block;
    }
    
    /* 方式1：完全移除 */
    .display-none {
      display: none;
    }
    
    /* 方式2：不可见但占位 */
    .visibility-hidden {
      visibility: hidden;
    }
    
    /* 方式3：透明但可交互 */
    .opacity-zero {
      opacity: 0;
    }
    
    /* 方式4：高度为0 */
    .height-zero {
      height: 0;
      overflow: hidden;
      /* 需要清除 padding 和 h38kz */
      padding: 0;
      border: none;
    }
  </style>
</head>
<body>
  <div class="box">正常</div>
  <div class="box display-none">display:none</div>
  <div class="box visibility-hidden">visibility:hidden</div>
  <div class="box opacity-zero" onclick="alert('clicked!')">opacity:0</div>
  <div class="box height-zero">height:0</div>
  <div class="box">正常</div>
</body>
</html>

对比表格

属性	占据空间	响应事件	子元素可见	触发回流	支持动画
display: none	❌	❌	❌	✅	❌
visibility: hidden	✅	❌	✅	❌	❌
opacity: 0	✅	✅	❌	❌	✅
height: 0	❌	❌	❌	✅	✅

使用场景

/* 场景1：完全隐藏，不需要动画 */
.modal.closed {
  display: none;
}

/* 场景2：需要保留占位，防止布局抖动 */
.placeholder {
  visibility: hidden;
}

/* 场景3：需要淡入淡出动画 */
.fade {
  opacity: 0;
  transition: opacity 0.3s;
}
.fade.show {
  opacity: 1;
}

/* 场景4：折叠展开动画 */
.collapse {
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}
.collapse.open {
  height: auto; /* 注意：height: auto 无法过渡，需要用具体值或 JS */
}

关键点

display: none 完全移除元素，不占空间，触发重排
visibility: hidden 隐藏但占位，子元素可单独设置可见
opacity: 0 透明但仍可交互，适合做动画
height: 0 需配合 overflow: hidden，注意清除 padding/border
性能考虑：频繁切换用 visibility 或 opacity，避免重排