CSS中display:none与display:hidden的区别、适用场景及按钮触发显示div咨询

先纠正个常见笔误：你说的display:hidden其实不存在，正确的属性是visibility:hidden，下面就针对display:none和visibility:hidden来拆解区别和适用场景。

核心区别 #

• 空间占用：display:none的元素会完全从文档流中消失，页面不会为它预留任何空间；visibility:hidden的元素只是视觉上不可见，它原本占据的布局空间会保留，周围元素的位置不会受影响。
• 渲染与子元素：display:none的元素及其所有子元素都不会被浏览器渲染；visibility:hidden的元素本身会被渲染，要是子元素单独设置visibility:visible，子元素能正常显示。
• 动画支持：display属性的切换没法触发CSS过渡或动画；visibility的切换可以配合opacity属性实现平滑的渐隐渐现效果。
• 交互性：display:none的元素无法响应任何DOM事件（比如点击、鼠标悬停）；visibility:hidden的元素虽然看不见，但仍然能触发事件。

适用场景 #

用display:none的情况

• 完全移除元素且不希望它占布局空间：比如弹窗关闭后、动态加载的内容在未触发前，用这个能避免空白占位。
• 性能优化：初始不需要展示的元素（比如tab切换里的非活跃内容），用display:none可以减少页面初始渲染的工作量。

用visibility:hidden的情况

• 需要保留布局位置的临时隐藏：比如表单里的错误提示，隐藏后不会让其他表单元素移位。
• 实现渐隐渐现动画：结合transition: visibility 0s, opacity 0.3s;，可以让元素平滑隐藏或显示，不会有突兀的跳转。

点击按钮显示div的实现示例 #

下面是最简单的原生实现方式，通过控制类名切换状态：

HTML

<button id="toggleBtn">点击显示内容</button>
<div id="contentBox" class="is-hidden">这是点击后才会出现的内容</div>

CSS

.is-hidden {
  display: none;
}

#contentBox {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #eee;
  background: #f9f9f9;
}

JavaScript

const toggleBtn = document.getElementById('toggleBtn');
const contentBox = document.getElementById('contentBox');

toggleBtn.addEventListener('click', () => {
  // 切换隐藏/显示状态
  contentBox.classList.toggle('is-hidden');
  // 如果需要点击后只显示一次，改成下面这行：
  // contentBox.style.display = 'block';
});

内容的提问来源于stack exchange，提问作者Sankalp Shakti