0Pricing
CSS Academy · 课时

可见性与 Display None

了解何时使用 visibility: hidden 而不是 display: none，以及两者如何影响布局。

可见性与 Display None 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

隐藏元素的三种方式

CSS 提供了三种常见的隐藏元素的方法，它们对布局、可访问性和交互的影响各不相同：

  1. display: none
  2. visibility: hidden
  3. opacity: 0

display: none

元素会从布局中完全移除。它不占用空间、不可交互，并且屏幕阅读器不会读取它（在大多数实现中）。但元素仍然存在于 DOM 中。

<p>Visible paragraph.</p>
<p class="hidden">You will never see this.</p>

visibility: hidden

元素不可见但仍会占用空间。它不能被点击，屏幕阅读器也不会读取它。适合在隐藏内容的同时避免引发布局偏移。

<p>Before</p>
<p class="invisible">Invisible but space reserved</p>
<p>After</p>

opacity: 0

元素不可见但仍可进行完整交互。它仍然占用空间，并会响应事件（点击、悬停）。屏幕阅读器可能仍会读取它。

<button class="transparent">Invisible but clickable</button>

visibility: visible 覆盖

子元素可以通过设置 visibility: visible 来覆盖父元素的 visibility: hidden。使用 display: none 时则无法做到这一点——子元素绝对无法覆盖它。

<div class="parent">Hidden parent text <span class="child">but this child is visible</span></div>

对照表

快速参考：

  • display: none：不占空间、不可点击、不会被读取
  • visibility: hidden：占用空间、不可点击、不会被读取
  • opacity: 0：占用空间、仍可点击、可能会被读取

为 visibility 添加过渡

display 不能进行过渡。要让元素淡入或淡出，请将 visibility 与 opacity 结合使用：

<div class="dropdown open">Dropdown menu content</div>

使用 SR-only 进行可访问隐藏

仅供屏幕阅读器使用的模式会在视觉上隐藏内容，同时使辅助技术仍可访问这些内容：

<button>Save <span class="sr-only">your document now</span></button>

hidden 属性与 CSS

HTML 的 hidden 属性会通过浏览器的用户代理样式表应用 display: none。它具备可访问性且符合语义，但可以被 CSS 优先级覆盖。

<div hidden>Hidden via the HTML attribute</div>
<div class="css-hidden">Hidden via CSS display:none</div>
<p>Visible content</p>

content-visibility

content-visibility: hidden 会跳过屏幕外部分的渲染，同时保留其可访问性树和布局。这是一种适用于长页面的现代性能优化技术。

<div class="offscreen-section">Long offscreen section rendered lazily</div>

pointer-events: none

如果要让元素保持可见但不可交互，请使用 pointer-events: none。点击和悬停事件会穿过该元素，传递给其下方的元素。

<div class="overlay">Clicks pass through this overlay</div>

快速检查

哪种技术可以在保留元素所占布局空间的同时隐藏元素？

回顾

display: none 会将元素从布局中完全移除。visibility: hidden 会隐藏元素但保留空间。opacity: 0 会隐藏元素但保留其交互能力。要实现可访问隐藏，请使用 .sr-only 模式。将 visibility 与 opacity 结合使用可以实现淡入淡出过渡。

常见问题解答

「可见性与 Display None」课时是免费的吗？

是的 — 「可见性与 Display None」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「可见性与 Display None」这节课中我会学到什么？

了解何时使用 visibility: hidden 而不是 display: none，以及两者如何影响布局。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「可见性与 Display None」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 块级、行内与行内块
  2. 可见性与 Display None
  3. 溢出：滚动、裁剪与自动
  4. CSS 重置与规范化
← 返回 CSS Academy