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

【问题标题】：What is the difference between visibility:hidden and display:none?可见性：隐藏和显示：无有什么区别？
【发布时间】：2010-09-13 01:56:08
【问题描述】：

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

【问题讨论】：

标签： css visibility

【解决方案1】：

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

visibility:hidden 将其隐藏但留下空间。

【讨论】：

【解决方案2】：

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

【讨论】：

对一个和另一个的性能没有评论？我很好奇使用哪种方法来隐藏绝对定位的元素，这些元素经常被显示和隐藏。
@Kevin 是正确的，因为 visibility: hidden 和 display: none 将具有同等的性能，因为它们都重新触发布局、绘制和合成。但是，opacity: 0 在功能上等同于visibility: hidden，并且不会重新触发布局步骤，因此如果您不介意仍在分配的空白空间，我建议您使用它（否则使用display: none）。
在讨论可见性与显示时，务必牢记 css-transitions。例如，从可见性切换：隐藏；能见度：可见；允许使用 css-transitions，而从 display: none 切换；显示：块；才不是。 visibility: hidden 具有不捕获 javascript 事件的额外好处，而 opacity: 0;捕获事件。
opacity: 0 在处理输入或按钮时应谨慎使用，因为它们仍然存在并可能导致奇怪的用户交互。
如果您选择使用 opacity: 0 表示具有交互元素的元素，请记住还要添加：pointer-events: none;

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

它们不是同义词。

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

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

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

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

【讨论】：

【解决方案8】：

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

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.

（一定要点击上方的“运行代码sn-p”按钮查看结果。）

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

另一个区别是如果你选择文本，然后复制/粘贴为纯文本，你会得到以下内容：

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

【讨论】：

【解决方案9】：

如果可见性属性设置为"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>

View details

【讨论】：

【解决方案10】：

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

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

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

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

【讨论】：

【解决方案13】：

子节点有很大的不同。例如：如果您有一个父 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 将不显示。

【讨论】：

【解决方案14】：

另一个区别是visibility:hidden 可以在非常非常旧的浏览器中工作，而display:none 不能：

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

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

【讨论】：

【解决方案15】：

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

【讨论】：

【解决方案16】：

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

【讨论】：

【解决方案17】：

差异不仅仅在于样式，还反映在使用 JavaScript 操作时元素的行为方式。

display: none的作用和副作用：

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

visibility: hidden 的影响和副作用：

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

【讨论】：

【解决方案18】：

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

display: none; 和 visibility: hidden; 可能无法被所有屏幕阅读器软件读取。请牢记视障用户的体验。

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

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

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

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

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

【讨论】：

【解决方案19】：

显示：无

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

一个元素根本不会出现在页面上，但我们仍然可以通过 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 捕获事件

【讨论】：

为什么可见性改变会重新触发布局？

【解决方案20】：

总结所有其他答案：

visibility	display
element with visibility: hidden, is hidden for all practical purposes (mouse pointers, keyboard focus, screenreaders), but still occupies space in the rendered markup	element with display:none, is hidden for all practical purposes (mouse pointers, keyboard focus, screenreaders), and DOES NOT occupy space in the rendered markup
css transitions can be applied for visibility changes	css transitions can not be applied on display changes
you can make a parent visibility:hidden but a child with visibility: visible would still be shown	when parent is display:none, children can't override and make themselves visible
part of the DOM tree (so you can still target it with DOM queries)	part of the DOM tree (so you can still target it with DOM queries)
part of the render tree	NOT part of the render tree
any reflow / layout in the parent element or child elements, would possibly trigger a reflow in these elements as well, as they are part of the render tree.	any reflow / layout in the parent element, would not impact these elements, as these are not part of the render tree
toggling between visibility: hidden and visible, would possibly not trigger a reflow / layout. (According to this comment it does: What is the difference between visibility:hidden and display:none? and possibly according to this as well https://developers.google.com/speed/docs/insights/browser-reflow)	toggling between display:none to display: (something else), would lead to a layout /reflow as this element would now become part of the render tree
you can measure the element through DOM methods	you can not measure the element or its descendants using DOM methods
If you have a huge number of elements using visibility: none on the page, the browser might hang while rendering, as all these elements require layout, even though they are not shown	If you have a huge number of elements using display:none, they wouldn't impact the rendering as they are not part of the render tree

资源：

其他信息：

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

【讨论】：

【解决方案21】：

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

【讨论】：