CSS中display与visibility区别详解

CSS容器的显示隐藏是前端开发中常见的需求，`display: none`和`visibility: hidden`是两种常用的控制方式。`display: none`会彻底移除元素，不占据任何空间，适用于完全不需要展示和交互的场景；而`visibility: hidden`则只是视觉上隐藏元素，但仍保留其占据的空间，更适合需要保持布局或实现动画效果的场景。本文将深入对比这两种属性，探讨它们在不同场景下的应用、优缺点，以及对页面布局、事件监听和无障碍性的影响，帮助开发者根据实际需求做出更合理的选择，避免潜在的无障碍性问题，提升用户体验。

display: none彻底移除元素且不占空间，适合无需交互的隐藏；visibility: hidden保留空间但视觉隐藏，适用于需保持布局或配合动画的场景。

CSS容器的显示隐藏，核心上我们通常会用 display: none 和 visibility: hidden 这两个CSS属性。简单来说，display: none 会让元素彻底从文档流中消失，不占据任何空间，就像它从未存在过一样；而 visibility: hidden 则只是让元素不可见，但它原本占据的空间依然保留在那里，对页面布局仍然有影响。选择哪个，很大程度上取决于你对元素空间占用和交互行为的需求。

解决方案

要控制一个CSS容器的显示隐藏，最直接且常用的方法就是通过修改其 display 或 visibility 属性。

当我们设置 display: none; 时，目标元素会从渲染树中完全移除。这意味着它不仅在视觉上消失，也不会在页面布局中占据任何物理空间。其他元素会像它从未存在过一样重新排列。同时，该元素上的所有事件监听器也会失效，无法被点击、聚焦或通过脚本交互。这是一种“彻底隐藏”的方式。

.hidden-completely {
    display: none;
}

相对地，visibility: hidden; 则仅仅是让元素在视觉上变得透明，不可见。但它在文档流中仍然占据着原有的空间，对页面布局的影响丝毫未变。想象一下，就像一个隐形人站在那里，你看不见他，但他仍然会阻挡你的去路。虽然元素不可见，但它的事件监听器通常仍然是激活的，理论上可以通过编程方式与其交互（尽管用户无法直接点击）。

.hidden-but-takes-space {
    visibility: hidden;
}

我个人在实际开发中，会根据具体场景来选择。如果一个元素是临时性的，或者在某些条件下完全不需要出现在页面上，比如一个加载动画结束后就彻底移除，或者一个错误提示只有在特定错误发生时才显示，那么 display: none 是我的首选。它干净利落，不留痕迹。但如果我需要保留元素的布局位置，比如一个占位符，或者我想通过CSS动画平滑地过渡元素的出现与消失，那么 visibility: hidden 配合 opacity 往往会更灵活。

display: none 与 visibility: hidden 在实际应用中各有什么最佳场景？

在我看来，这两种隐藏方式的选择，往往是对“空间占用”和“交互需求”的权衡。

display: none 的最佳应用场景，通常涉及那些不需要在页面上占据任何空间、且在隐藏期间不需要任何交互的元素。比如：

• 模态框 (Modal Dialogs) 或弹出菜单的初始状态： 在它们被激活之前，我们通常不希望它们占据任何布局空间，避免影响页面其他元素的排布。
• 基于条件渲染的内容： 比如用户登录前后的不同界面部分，或者表单验证失败时才出现的错误信息。这些内容在不需要时，应该完全从DOM中移除，以减少不必要的渲染开销和布局计算。
• 响应式设计中的元素切换： 在不同屏幕尺寸下，某些元素可能需要完全隐藏，以优化布局。

使用 display: none 的好处是它能彻底减少浏览器渲染的负担，因为元素完全不在渲染树中。但它的一个“缺点”是，从 display: none 切换到 display: block (或其他 display 值) 时，无法直接应用CSS过渡动画。这是一个离散的、瞬间的变化。

而 visibility: hidden 更适合那些需要保持其布局空间，或者需要配合动画效果的场景：

• 占位符或布局固定： 如果你希望某个区域在内容隐藏时仍然保持其大小和位置，以避免页面布局跳动，visibility: hidden 就很合适。例如，一个消息通知区域，即使没有消息，也希望它保持固定高度，以防其他内容“跳上来”。
• 与 opacity 结合实现平滑过渡： 这是一个非常常见的技巧。你可以先将 visibility 设置为 hidden，然后通过 opacity: 0 来实现视觉上的隐藏，同时保持元素在DOM中。当需要显示时，先将 visibility 设为 visible，再将 opacity 从 0 动画到 1。这样就能实现一个漂亮的淡入淡出效果，而元素在整个过程中都占据着空间。
• 需要保留事件监听器的情况： 尽管元素不可见，但如果它上面有JavaScript事件监听器，并且你希望这些监听器在元素隐藏时仍然保持激活状态（尽管用户无法直接触发），visibility: hidden 可以做到这一点。不过，这在实际应用中并不多见，因为用户无法看到并交互。

除了 display 和 visibility，还有哪些CSS属性可以控制元素的可见性，它们有什么不同？

CSS提供了不止两种方式来控制元素的可见性，每种都有其独特的行为和适用场景。除了 display: none 和 visibility: hidden，我们常用的还有 opacity: 0 以及一些通过定位或尺寸控制的技巧。

1. opacity: 0;

   • 行为： 元素变得完全透明，但它仍然在文档流中占据空间，并且可以接收鼠标事件（比如点击）。它就像一个完全透明的玻璃板，你看不见它，但它确实在那里，并且你可以触摸到它。
   • 与 visibility: hidden 的主要区别： opacity: 0 的元素可以被点击，而 visibility: hidden 的元素通常无法被点击（尽管事件监听器可能仍然激活，但用户行为触发不了）。
   • 最佳用途： 它是实现淡入淡出动画的黄金搭档。结合 transition 属性，可以轻松地让元素平滑地出现或消失，而不会引起布局的剧烈变化。比如，一个图片库的切换效果，或者一个菜单项的鼠标悬停提示。

2. position: absolute; left: -9999px; (或 top: -9999px;)

   • 行为： 这种方法是将元素移到屏幕之外一个非常遥远的位置，使其在视觉上不可见。它仍然存在于文档流中（尽管因为 position: absolute 而脱离了正常流），并且可以被屏幕阅读器访问。
   • 与 display: none 的主要区别： display: none 会将元素从无障碍树中移除，屏幕阅读器无法感知。而这种方法则保留了元素在无障碍树中的存在，对于需要对辅助技术可见但对普通用户隐藏的内容（例如一些仅供屏幕阅读器读取的描述性文本），这是一种常见的无障碍性（Accessibility）技巧。
   • 最佳用途： 无障碍性隐藏。例如，一个表单的必填项提示，你希望它在视觉上不干扰布局，但屏幕阅读器用户需要听到。

3. width: 0; height: 0; overflow: hidden; (可能还需要 padding: 0; margin: 0;)

   • 行为： 通过将元素的宽度和高度设置为零，并隐藏溢出内容，来“折叠”元素。这实际上是让元素占据一个零空间，但它仍然存在于DOM中。
   • 与 display: none 的主要区别： 这种方法可以配合CSS过渡动画，实现类似手风琴（Accordion）效果的展开和收起，而 display: none 无法直接动画。
   • 最佳用途： 创建可折叠的内容区域，如手风琴菜单或可展开/收起的面板。它能提供更精细的动画控制。

每种方法都有其特定的应用场景和对性能、无障碍性的不同影响。选择哪一种，需要综合考虑你的具体需求，包括是否需要保留空间、是否需要动画、以及对无障碍性的要求。

在使用 display: none 和 visibility: hidden 时，开发者常遇到的挑战和潜在的无障碍性问题有哪些？

在日常开发中，虽然 display: none 和 visibility: hidden 是控制元素可见性的利器，但它们并非没有“脾气”。我们经常会遇到一些挑战，尤其是在无障碍性方面，稍不注意就可能给用户体验带来困扰。

一个比较常见的挑战是动画和过渡问题。正如前面提到的，display: none 是一个离散的属性，从 none 到 block（或其他显示类型）的转变是瞬间发生的，CSS过渡属性对其无效。这意味着如果你想让一个 display: none 的元素平滑地出现，你通常需要一些JavaScript的介入，比如先改变 opacity 或 height，然后等待一小段时间再改变 display。这无疑增加了代码的复杂性。而 visibility: hidden 虽然可以配合 opacity 进行动画，但它本身的变化也是离散的，如果你直接从 hidden 到 visible，也无法直接过渡。所以，很多时候我们会结合 opacity 和 transition 来达到平滑效果，同时通过 visibility 来控制元素的事件接收。

另一个挑战是元素内部的脚本和事件失效。当一个元素被设置为 display: none 时，它及其所有子元素都会从渲染树中移除，这意味着它们不再是页面的一部分。任何依赖于这些元素存在的JavaScript代码，比如事件监听器、尺寸计算、或者一些第三方库的初始化，都可能失效或产生不可预期的行为。比如，一个图表库可能无法在 display: none 的容器中正确渲染。对于 visibility: hidden 的元素，虽然它仍然在DOM中，但用户无法直接与之交互，如果其内部的事件是依赖用户点击等行为触发的，那也形同虚设。

至于无障碍性问题 (Accessibility Issues)，这更是需要我们开发者深思熟虑的地方：

• display: none 对屏幕阅读器的影响是彻底的。 当一个元素被 display: none 隐藏时，它会从无障碍树（Accessibility Tree）中完全移除。这意味着屏幕阅读器（Screen Reader）用户将完全无法感知到这些内容的存在。如果这些内容对理解页面或完成任务至关重要，那么用户就会遇到严重的障碍。例如，一个重要的错误提示信息如果用 display: none 隐藏，屏幕阅读器用户可能永远不会知道表单提交失败的原因。
• visibility: hidden 的情况则稍微复杂一些。 理论上，visibility: hidden 的元素仍然存在于DOM中，因此也存在于无障碍树中。但实际上，不同的屏幕阅读器和浏览器组合可能会有不同的表现。有些屏幕阅读器可能会读取这些内容，有些则不会。这导致了不确定性，使得 visibility: hidden 并非一个可靠的无障碍隐藏方案。为了明确告诉辅助技术某个元素是视觉隐藏的，但其内容对辅助技术不重要，我们通常会结合使用 aria-hidden="true" 属性。
• 过度依赖视觉隐藏而非语义化。 有时候开发者为了快速实现某种效果，会滥用这些隐藏属性，而不是从HTML语义化的角度去思考。例如，不应该将一个标题或重要的链接用 display: none 隐藏，除非它真的是在特定条件下才出现且不影响页面核心理解。对于需要对屏幕阅读器可见但视觉隐藏的内容，我们更倾向于使用 position: absolute; left: -9999px; 这样的技术，或者专门为无障碍性设计的CSS类（如 sr-only）。

总的来说，使用 display: none 和 visibility: hidden 时，我们需要清楚地知道它们对布局、交互和无障碍性的影响。在决定使用哪种方法时，多问自己几个问题：这个元素需要占据空间吗？它需要动画吗？它对屏幕阅读器用户重要吗？这些思考能帮助我们做出更明智、更健壮的选择。

以上就是《CSS中display与visibility区别详解》的详细内容，更多关于布局,无障碍性,display:none,visibility:hidden,CSS显示隐藏的资料请关注golang学习网公众号！