CSS基础教程（二十三）Display(显示) 与 Visibility（可见性）：别再让HTML“社恐”或“社死”！CSS Display与Visibility的隐身艺术与职场哲学

原创于 2025-09-11 08:55:24 发布 · 385 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

CSS基础教程专栏收录该内容

57 篇文章

订阅专栏

在前端开发这个充满逻辑与艺术的江湖里，我们常常需要操控元素的“生杀大权”——让它出现或消失。这时，你手上有两把看起来相似的“武器”：display 和 visibility。新手们往往会混淆它们，以为都是让东西看不见，结果在布局上栽了大跟头。

别急，今天我们就来上演一出《CSS隐身大师》的年度大戏，看看display和visibility这两位主角，是如何在“消失”这场戏里，演绎出完全不同的人生轨迹。

第一幕：核心概念——两种截然不同的“请假条”

想象一下，你管理的HTML元素就是一个公司的员工。

display: none; —— 员工的“辞退信”
当你给一个元素设置 display: none; 时，你相当于直接给这位员工下了辞退通知。

- 效果：它不仅人不见了（不可见），连它的工位（在文档流中的空间）也立刻被HR回收，分配给其他同事（后续元素会顶上来填补它的位置）。
- 影响：它无法再参与任何公司活动（无法响应任何点击、悬停等交互事件）。整个公司的布局（Layout）会立刻进行一次重组，因为少了一个人。

visibility: hidden; —— 员工的“带薪长假”
当你给一个元素设置 visibility: hidden; 时，你相当于给这位员工批了一个长长的带薪假。

- 效果：他人虽然不在公司（不可见），但他的工位还原封不动地给他留着，谁也不准动（在文档流中的空间仍然保留）。
- 影响：虽然他人在马尔代夫晒太阳，但他的工位还在，所以公司布局（Layout）保持不变，其他同事的位置也不会因此移动。不过，你也别指望他能远程参加公司的篮球赛了（无法响应交互事件）。但有个例外！如果他有个“显眼包”儿子（子元素），你可以通过给儿子设置 visibility: visible; 让它来公司刷存在感。

简单总结一下核心区别：

特性	`display: none;`	`visibility: hidden;`
是否占据空间	否，空间被释放	是，空间保留
是否影响文档流/布局	是，会导致回流 (Reflow)	否，只会重绘 (Repaint)，性能更优
是否可交互	否	否 (但其子元素若设为 `visible` 则可交互)
子元素是否可逆转显示	否，子元素跟着“被辞退”	是，子元素可单独设置为 `visible`

第二幕：深度解剖——浏览器眼中的它们（性能与可访问性）

这个部分才是真正体现“深度”的地方。

性能影响：回流（Reflow） vs. 重绘（Repaint）

- display: none：它的切换会触发浏览器的回流（又称重排）。这是一个成本较高的操作，因为浏览器需要重新计算元素的位置和几何形状，并更新整个渲染树。如果你在动画或频繁操作中大量使用，可能会对页面性能造成 noticeable 的影响。
- visibility: hidden：它的切换通常只会触发重绘。因为元素的空间和位置没有改变，只是颜色、透明度等可见属性变了，所以浏览器的计算量要小得多，性能开销更低。

实战建议：在需要高频次显示/隐藏元素的场景（如轮播图、复杂动画），如果条件允许，优先考虑 visibility 或 opacity（透明度，也只触发重绘复合）以获得更流畅的性能。

可访问性（A11y）考量

- 无论是 display: none 还是 visibility: hidden，都会被屏幕阅读器等辅助技术忽略，元素及其子内容不会被读取。这是它们共同的目标——真正地隐藏内容。
- 如果你有需要被屏幕阅读器读取但视觉上对普通用户隐藏的内容（比如一些额外的提示信息），这两种方法都不适用。应该使用诸如 clip-path, absolute positioning off-screen 等“视觉隐藏”技术。

第三幕：实战示例——看代码如何说话

光说不练假把式，让我们用几个常见场景来彻底搞懂它们。

示例 1：导航栏菜单的切换（该用谁？）

这是一个经典场景。点击一个按钮，下拉菜单出现；再次点击，菜单消失。

错误示范（使用 visibility）：

.dropdown-menu {
  visibility: hidden;
  /* 菜单隐藏了，但它的空间还占着，下面的内容无法紧贴按钮，会留出一片空白！ */
}
.dropdown-button:focus + .dropdown-menu {
  visibility: visible;
}

你会发现，菜单弹出时，下面的内容会被“推开”，体验极差。

正确示范（使用 display）：

.dropdown-menu {
  display: none; /* 彻底消失，不占空间 */
  position: absolute; /* 通常配合绝对定位 */
  background: #fff;
  /* ... 其他样式 */
}
.dropdown-button:focus + .dropdown-menu {
  display: block; /* 华丽登场 */
}

这样，菜单的显示和隐藏才会干净利落，不影响周围布局。

示例 2：自定义复选框的“选中”状态（该用谁？）

我们常用 label 和隐藏的原生 input 来美化复选框。

<input type="checkbox" id="awesome-checkbox">
<label for="awesome-checkbox">点我试试！</label>

我们希望原生复选框永远消失，但它的功能还在。

最佳实践（使用 display: none？）：

#awesome-checkbox {
  display: none; /* 完美！ */
}

为什么？因为我们希望它既不显示，也不占据空间，并且它的点击事件要通过 label 来触发。visibility: hidden 会保留空间，可能会在页面左上角留下一片诡异的空白。

示例 3：鼠标悬停显示提示框（Tooltip）（该用谁？）

我们希望鼠标放在一个图标上时，旁边浮现一个提示文字。

优化实践（使用 visibility + opacity 实现淡入淡出）：

.tooltip {
  position: relative;
}
.tooltip-text {
  position: absolute;
  visibility: hidden; /* 初始隐藏，但保留空间 */
  opacity: 0; /* 透明度为0 */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* 添加过渡动画 */
  /* ... 其他定位样式 */
}
.tooltip:hover .tooltip-text {
  visibility: visible; /* 显示 */
  opacity: 1; /* 不透明 */
}

这里为什么用 visibility？因为 visibility 属性是可以和 opacity 一起做过渡动画的！如果我们只用 display，是无法实现淡入淡出效果的，它只能是“硬切”。同时，visibility 保留了空间，避免了在动画过程中可能出现的布局抖动。

第四幕：特殊技能与番外篇

visibility: collapse;：这是一个特殊值，主要用于表格的 行（tr）、列（col）、行组（tbody） 等。对于表格元素，它的表现类似 display: none;，会移除内容并不占空间。对于其他元素，它的表现等同于 visibility: hidden;。
opacity: 0;：这位客串嘉宾也常被用来隐藏元素。它将元素变为完全透明，但元素本身的空间保留，并且默认情况下它仍然可以响应交互事件（比如点击了透明区域也会触发点击事件）。这是它与前两者一个很大的不同。