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

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

1 <a href="http://example.com" style="display: none;"> < / >链接。< br / > <a href="http://example.com" style="可见性:隐藏;"> < / >链接。< br / > <a href="http://example.com" style="不透明度:0;"> < / >链接。

(请务必点击上面的“运行代码片段”按钮查看结果。)

1和2之间的区别已经指出了(即2仍然占据空间)。但是，2和3之间有区别:在情况3中，鼠标停留在链接上时仍然会切换到手，用户仍然可以单击链接，Javascript事件仍然会在链接上触发。这通常不是你想要的行为(但有时可能是?)

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

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

在情况3中，文本被复制了。也许这对于某种类型的水印是有用的，或者如果你想隐藏一个版权声明，如果一个粗心的用户复制/粘贴你的内容会显示出来?

Display:none表示所讨论的标签根本不会出现在页面上(尽管您仍然可以通过dom与它进行交互)。在其他标记之间不会为它分配空间。

可见性:隐藏意味着与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]:隐藏结果:

test |                        | test

正如在这个堆栈的其他地方所描述的，这两者并不是同义词。Visibility:hidden将在页面上留下空白，而display:none将完全隐藏元素。我认为有必要讨论一下这是如何影响给定元素的子元素的。如果你要使用visibility:hidden，那么你可以用正确的样式显示该元素的子元素。但是对于display:none，不管你是否使用display: block | flex | inline | grid | inline-block，你都会隐藏子元素。

可见性:隐藏将元素保留在页面中，并占用该空间，但不显示给用户。

显示:无将在页面中不可用，不占用任何空间。

另一个区别是可见性:hidden在非常非常老的浏览器中有效，而display:none则不行:

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

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