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

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

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

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

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

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

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

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

visibility: hidden从视图中隐藏元素，但不隐藏页面流，在页面上为它留下空间。

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

display:none将隐藏元素并折叠正在占用的空间，而visibility:hidden将隐藏元素并保留元素空间。

它们不是同义词。

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

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

想象一下，你在游乐园排队乘车，队伍中的某个人变得非常吵闹，以至于保安把他们从队伍中拉出来。然后排队的每个人都会向前移动一个位置来填补现在的空位置。这就像display:none。

相比之下，类似的情况是，你前面的某个人穿上了隐形衣。当看到这条线时，它看起来像是有一个空白的空间，但人们不能真正填补那个空白的空间，因为还有人在那里。这就像visibility:hidden。

有一件事值得补充，尽管没有被问到，是有第三种选择使对象完全透明。考虑：

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.

在情况3中，文本确实被复制了。也许这对某种类型的水印有用，或者如果您想隐藏版权声明，如果用户不小心复制/粘贴了您的内容，它会显示出来？

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

查看详情

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

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

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

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

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

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

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

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

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

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

区别超出了样式，反映在元素在使用JavaScript操作时的行为方式上。

display: none的影响和副作用：

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

visibility: hidden的影响和副作用：

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

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

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;}

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

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

• https://webaim.org/techniques/css/invisiblecontent/
• https://webaim.org/techniques/skipnav/

展示：无

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

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

可见性：隐藏

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

元素不可见，元素的空间在页面上为其分配。

隐藏元素的其他方法

使用z指数

#element {z-index: -11111;}

将元素移出页面

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

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

visibility: hidden和display: none的性能相同，因为它们都重新触发布局、绘制和合成。然而，opacity: 0的功能等同于visibility: hidden，并且不会重新触发布局步骤。

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

总结所有其他答案：

资源说明：