在前端页面开发过程中，根据交互逻辑动态调整元素的可见状态是非常常见的需求，css提供了多种属性可以实现元素的显示与隐藏，不同方式的表现和适用场景各有区别。
使用display属性控制
display属性是最常用的控制元素显示隐藏的方式，当设置值为none时，元素会完全从文档流中移除，页面不会为其保留任何占位空间，周围的元素会填补它原本的位置。
如果需要重新显示元素，通常需要将display的值恢复为元素原本的显示类型，比如块级元素恢复为block，行内元素恢复为inline。
/* 隐藏元素 */
.hide-display {
display: none;
}
/* 显示元素，假设原元素是块级元素 */
.show-display {
display: block;
}
使用visibility属性控制
visibility属性的hidden值可以让元素不可见，但元素仍然会保留在文档流中，占据原本的空间，只是视觉上不可见，周围的元素不会移动位置。
该属性还有一个特殊的值collapse，主要用于表格相关元素，对于非表格元素，表现和hidden一致。
/* 隐藏元素，保留占位 */
.hide-visibility {
visibility: hidden;
}
/* 显示元素 */
.show-visibility {
visibility: visible;
}
使用opacity属性控制
opacity属性用来设置元素的透明度，取值范围是0到1，当设置为0时，元素会完全透明，看起来像是隐藏了，但元素仍然存在于文档流中，占据空间，并且可以响应点击事件。
如果需要让透明元素不响应点击，通常需要配合pointer-events: none使用。
/* 透明隐藏元素，可点击 */
.hide-opacity {
opacity: 0;
}
/* 透明隐藏元素，不可点击 */
.hide-opacity-no-click {
opacity: 0;
pointer-events: none;
}
/* 显示元素 */
.show-opacity {
opacity: 1;
}
三种方式的差异对比
下面从多个维度对比三种方式的区别，帮助开发者选择合适的方案：
| 控制方式 | 是否占据文档流空间 | 是否可响应点击 | 是否支持过渡动画 |
|---|---|---|---|
| display: none | 否 | 否 | 否 |
| visibility: hidden | 是 | 否 | 是 |
| opacity: 0 | 是 | 是（默认） | 是 |
实际场景选择建议
- 如果隐藏元素后不需要保留其占位空间，且不需要过渡动画，优先选择
display: none，性能最优。 - 如果需要保留元素的占位空间，同时需要过渡动画效果，选择
visibility属性。 - 如果需要实现淡入淡出的过渡效果，或者需要元素隐藏后仍然可以触发某些交互逻辑，选择
opacity属性配合pointer-events使用。
注意：display: none的元素不会出现在页面的可访问性树中，屏幕阅读器无法读取其内容，而visibility: hidden和opacity: 0的元素仍然会被屏幕阅读器识别，开发时需要根据无障碍访问需求选择方案。
cssdisplaynonevisibilityopacity修改时间：2026-06-18 17:00:28