css - 可见性：隐藏和显示：无有什么区别？

Question

CSS 规则visibility:hidden和display:none两者都导致元素不可见。这些是同义词吗？

score 1625 · Accepted Answer

display:none意味着有问题的标签根本不会出现在页面上（尽管您仍然可以通过 dom 与它进行交互）。其他标签之间不会有空间分配给它。

visibility:hidden表示与不同display:none，标签不可见，但在页面上为其分配了空间。标签被渲染，它只是在页面上看不到。

例如：

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

替换[style-tag-value]为display:none结果：

test |   | test

替换[style-tag-value]为visibility:hidden结果：

test |                        | test

score 271 · Accepted Answer

它们不是同义词。

display:none从页面的正常流程中移除元素，允许其他元素填充。

visibility:hidden将元素留在页面的正常流程中，从而仍然占用空间。

想象一下，您在游乐园排队乘车，排队的人变得如此吵闹，以至于安全人员将他们从队伍中拉了出来。然后，排队的每个人都将向前移动一个位置以填补现在的空位。这就像display:none.

将此与类似的情况进行对比，但您面前的某个人穿上了隐形斗篷。在查看线路时，看起来好像有一个空白空间，但人们无法真正填满那个看起来空白的空间，因为有人仍然在那里。这就像visibility:hidden.

score 123 · Accepted Answer

值得补充的一点是，虽然没有被问到，但还有第三个选项可以使对象完全透明。考虑：

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

（请务必单击上方的“运行代码片段”按钮以查看结果。）

1 和 2 的区别已经指出（即 2 仍然占用空间）。但是，2 和 3 有区别：在情况 3 中，鼠标悬停在链接上时仍然会切换到手，用户仍然可以点击链接，并且仍然会在链接上触发 Javascript 事件。这通常不是您想要的行为（但有时可能是？）。

另一个区别是，如果您选择文本，然后复制/粘贴为纯文本，您将获得以下信息：

1st link.
2nd  link.
3rd unseen link.

score 95 · Accepted Answer

95

display:none从布局流中移除元素。

visibility:hidden隐藏它但留下空间。

于 2008-09-25T12:39:43.200 回答

score 78 · Accepted Answer

子节点有很大的不同。例如：如果您有一个父 div 和一个嵌套的子 div。所以如果你这样写：

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

在这种情况下，任何 div 都不可见。但是如果你这样写：

<div id="parent" style="visibility:hidden;">
    <div id="child" style="visibility:visible;"></div>
</div>

然后子 div 将可见，而父 div 将不显示。

score 19 · Accepted Answer

它们不是同义词 -display: none从页面流中删除元素，页面的其余部分就像它不存在一样流动。

visibility: hidden隐藏元素而不是页面流，在页面上为它留出空间。

score 15 · Accepted Answer

display: none完全从页面中删除元素，并且页面的构建就像该元素根本不存在一样。

Visibility: hidden即使您再也看不到它，也会在文档流中留下空间。

这可能会或可能不会有很大的不同，具体取决于您在做什么。

score 11 · Accepted Answer

随着visibility:hidden对象仍然占据页面上的垂直高度。随着display:none它被完全删除。如果您在图像下方有文本并且您这样做display:none了，则该文本将向上移动以填充图像所在的空间。如果你做可见性：隐藏文本将保留在同一位置。

score 9 · Accepted Answer

display:none将隐藏元素并折叠占用的空间，而visibility:hidden将隐藏元素并保留元素空间。display:none 还会影响旧版本 IE 和 Safari 中 javascript 提供的一些属性。

score 8 · Accepted Answer

8

visibility:hidden保留空间；display:none没有。

于 2013-05-29T13:47:24.430 回答

score 7 · Accepted Answer

除了所有其他答案之外，IE8 还有一个重要区别：如果您使用display:none并尝试获取元素的宽度或高度，IE8 将返回 0（而其他浏览器将返回实际大小）。IE8 仅返回正确的宽度或高度visibility:hidden。

score 7 · Accepted Answer

display: none;

它将在页面上不可用，并且不占用任何空间。

visibility: hidden;

它隐藏了一个元素，但仍会占用与以前相同的空间。该元素将被隐藏，但仍然会影响布局。

visibility: hidden保留空间，display: none而不保留空间。

无显示示例：https ://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

可见性隐藏示例：https ://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

score 6 · Accepted Answer

visibility:hidden将元素保留在页面中并占用该空间，但不会向用户显示。

display:none将在页面中不可用且不占用任何空间。

score 6 · Accepted Answer

显示：无

它将从页面的正常流程中删除元素，允许其他元素填充。

一个元素根本不会出现在页面上，但我们仍然可以通过 DOM 与它进行交互。在其他元素之间不会为其分配空间。

可见性：隐藏

它会将元素留在页面的正常流程中，从而仍然占用空间。

一个元素是不可见的，并且在页面上为它分配了元素的空间。

其他一些隐藏元素的方法

使用z-index

#element {
   z-index: -11111;
}

将元素移出页面

#element {
   position: absolute; 
   top: -9999em;
   left: -9999em;
}

关于可见性的有趣信息：隐藏和显示：无属性

visibility: hidden并且display: none将具有同样的性能，因为它们都重新触发布局、绘制和合成。但是，opacity: 0功能是否等同于visibility: hidden并且不会重新触发布局步骤。

CSS-transition 属性也是我们需要注意的重要事项。因为从切换visibility: hidden到visibility: visible允许使用 CSS 转换，而从切换display: none到display: block不允许。visibility: hidden具有不捕获 JavaScript 事件的额外好处，而opacity: 0捕获事件

score 5 · Accepted Answer

如果 visibility 属性设置为"hidden"，浏览器仍然会在页面上为内容占用空间，即使它是不可见的。
但是当我们将对象设置为时"display:none"，浏览器不会在页面上为其内容分配空间。

例子：

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

查看详情

score 4 · Accepted Answer

这里有很多详细的答案，但我认为我应该添加它来解决可访问性问题，因为这会产生影响。

display: none;并且visibility: hidden;可能无法被所有屏幕阅读器软件读取。请记住视障用户将体验到什么。

该问题还询问同义词。text-indent: -9999px;是另一个大致相等的。与它的重要区别text-indent在于它通常会被屏幕阅读器阅读。这可能会带来一些糟糕的体验，因为用户仍然可以通过标签访问链接。

对于可访问性，我今天看到使用的是一种样式组合，用于隐藏元素同时对屏幕阅读器可见。

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

一个很好的做法是创建一个指向内容主体锚点的“跳转到内容”链接。视障用户可能不想在每个页面上都听完整的导航树。使链接在视觉上隐藏。用户只需点击标签即可访问该链接。

有关可访问性和隐藏内容的更多信息，请参阅：

score 3 · Accepted Answer

另一个区别是它visibility:hidden适用于非常非常旧的浏览器，并且display:none不：

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

score 2 · Accepted Answer

差异超出了样式，并反映在使用 JavaScript 操作时元素的行为方式。

效果和副作用display: none：

目标元素从文档流中取出（不影响其他元素的布局）；
所有后代都受到影响（也不显示，也不能“跳出”这个继承）；
无法对目标元素或其后代进行测量——它们根本不会被渲染，因此它们的clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), 都返回0s。

的影响和副作用visibility: hidden：

目标元素隐藏在视图之外，但没有被移出流程并影响布局，占用其正常空间；
innerText（但不是innerHTML）目标元素和后代返回空字符串。

score 1 · Accepted Answer

display:none;既不会显示元素，也不会在页面上为元素分配空间，而visibility:hidden;不会在页面上显示元素，但会在页面上分配空间。在这两种情况下，我们都可以访问 DOM 中的元素。为了更好地理解它，请查看以下代码： display:none vs visibility:hidden

score 0 · Accepted Answer

总结所有其他答案：

能见度	展示
具有可见性的元素：隐藏，出于所有实际目的（鼠标指针、键盘焦点、屏幕阅读器）而隐藏，但仍占用渲染标记中的空间	具有 display:none 的元素，出于所有实际目的（鼠标指针、键盘焦点、屏幕阅读器）而隐藏，并且不占用渲染标记中的空间
css 过渡可应用于可见性更改	css 过渡不能应用于显示更改
您可以使父可见性：隐藏但具有可见性的子级：可见仍会显示	当 parent 为 display:none 时，孩子不能覆盖并使自己可见
DOM 树的一部分（因此您仍然可以使用 DOM 查询来定位它）	DOM 树的一部分（因此您仍然可以使用 DOM 查询来定位它）
渲染树的一部分	不是渲染树的一部分
父元素或子元素中的任何重排/布局也可能会触发这些元素中的重排，因为它们是渲染树的一部分。	父元素中的任何回流/布局都不会影响这些元素，因为它们不是渲染树的一部分
在可见性：隐藏和可见之间切换，可能不会触发回流/布局。（根据此评论，它确实：可见性：隐藏和显示：无有什么区别？可能也根据此https://developers.google.com/speed/docs/insights/browser-reflow）	在 display:none 和 display: 之间切换会导致布局/reflow，因为这个元素现在将成为渲染树的一部分
您可以通过 DOM 方法测量元素	您不能使用 DOM 方法测量元素或其后代
如果页面上有大量元素使用可见性：无，浏览器可能会在渲染时挂起，因为所有这些元素都需要布局，即使它们没有显示	如果您有大量使用 display:none 的元素，它们不会影响渲染，因为它们不是渲染树的一部分

资源：

其他信息：

也有一些浏览器支持特性，但它们似乎适用于非常旧的浏览器，并且在其他答案中可用，所以我没有在这里讨论它们。
还有其他一些隐藏元素的替代方法，例如不透明度或屏幕外的绝对定位。所有这些都在某些或其他答案中被触及，并且有一些缺点。
根据此评论（visibility:hidden 和 display:none 之间的性能差异），如果您有很多元素使用 display:none 并且您更改为 display: （其他），它将导致单次回流，而如果您有多重可见性：隐藏元素并将它们变为可见，它将导致每个元素的回流。（我真的不明白这个）

score 0 · Accepted Answer

如本堆栈其他地方所述，两者不是同义词。visibility:hidden将在页面上留下空间，而display:none将完全隐藏元素。我认为谈论这如何影响给定元素的子元素很重要。如果您要使用，visibility:hidden那么您可以使用正确的样式显示该元素的子元素。但是display:none不管你用display: block | flex | inline | grid | inline-block不用都把孩子藏起来。

css - 可见性：隐藏和显示：无有什么区别？

21 回答 21

资源：

其他信息：

Related

Reference