17370845950

visibility: hidden 会隐藏元素但保留其空间，不影响布局，与 display: none 的完全移除不同，适用于需保持占位的场景。

在CSS中，visibility: hidden 是一种控制元素可见性的方法。它能让元素不可见，但依然保留在文档流中，占据原来的空间位置，不会影响页面布局的重新排列。

visibility: hidden 的特点

• 从视觉上隐藏，用户看不到内容
• 仍然占据页面中的原有空间和位置
• 子元素即使设置 visibility: visible 也无法显示（会被父级隐藏覆盖）
• 不影响其他元素的排版布局

例如：

.box {
  visibility: hidden;
}

这个 .box 元素将不可见，但它原本所在的位置还是“空着”，周围元素不会向它塌陷或移动。

与 display: none 的区别

很多人容易混淆 visibility: hidden 和 display: none，关键区别在于占位行为：

• visibility: hidden — 隐藏但占位
• display: none — 完全移除，不占任何空间

如果你希望隐藏元素的同时让其他元素“补上”空位，应该用 display: none；如果只是暂时不让用户看到，但要保留结构位置，就用 visibility: hidden。

常见使用场景

• 制作轮播图时，隐藏非当前页的幻灯片但仍保留布局
• 需要隐藏提示信息但不想引起页面跳动
• 配合 JavaScript 动态切换可见状态，避免频繁重排

基本上就这些。不复杂但容易忽略细节。关键是理解“隐藏 ≠ 移除”。