CSS中display与visibility区别详解

CSS中的display和visibility虽都用于控制元素显隐，但本质截然不同：display: none让元素彻底退出文档流、不占空间，而visibility: hidden仅使其不可见却保留原有布局位置；二者并非互斥，而是互补——通过灵活组合（如配合opacity和JavaScript状态切换），既能实现轻量级的视觉隐藏，又能完成彻底的布局移除，从而精准支撑各类交互需求，真正掌握它们的渲染差异，是构建响应式、高性能网页布局的关键基础。

在CSS中，display 和 visibility 都可以控制元素的显示与隐藏，但它们的作用机制不同。合理结合使用，可以在不同场景下实现更灵活的布局控制。

display: 控制元素是否在文档流中存在

使用 display: none 会让元素完全从页面布局中移除，不占据任何空间。

相反，display: block（或其他如 inline、flex 等）会恢复元素在文档流中的位置和尺寸。

• display: none; —— 元素隐藏且不占空间
• display: block; —— 显示块级元素

visibility: 控制元素是否可见

visibility: hidden 会让元素不可见，但它依然占据原来的空间。

visibility: visible 则让元素正常显示。

• visibility: hidden; —— 隐藏但保留占位
• visibility: visible; —— 正常显示

结合使用场景示例

有时候需要既隐藏元素又保留其空间，或者根据状态切换显示方式。可以通过组合这两个属性实现精细控制。

例如：一个提示框在特定条件下完全隐藏，其他时候根据状态决定是否透明显示。

.tooltip {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip.show {
  visibility: visible;
  opacity: 1;
}

.tooltip.hidden {
  display: none;
}

JavaScript 可这样控制：

// 仅隐藏但保留空间
element.classList.add('show'); // 显示
element.classList.remove('hidden');

// 完全移除
element.classList.add('hidden');
element.classList.remove('show');

总结：按需选择组合方式

如果想让元素彻底消失且不影响布局，用 display: none。

如果只是暂时看不见但仍要保留位置，用 visibility: hidden。

结合两者，可实现“先隐藏再移除”或“条件性占位”等复杂交互逻辑。

基本上就这些，关键是理解两者的渲染行为差异。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS中display与visibility区别详解》文章吧，也可关注golang学习网公众号了解相关技术文章。