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

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

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

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; 

它将不会出现在页面上，也不会占用任何空间。

visibility: hidden; 

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

可见性:隐藏保留空间，而显示:无不保留空间。

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

示例:https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

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

当涉及到子节点时，有很大的不同。例如:如果你有一个父div和一个嵌套的子div。所以如果你这样写:

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

在这种情况下，没有divs是可见的。但如果你这样写:

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

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

显示:没有

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

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

可见性:隐藏

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

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

其他隐藏元素的方法

使用z - index

#element {
   z-index: -11111;
}

将元素移出页面

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

关于可见性:hidden和display: none属性的有趣信息

可见性:隐藏和显示:没有一个会是同样的表现，因为它们都会重新触发布局，油漆和合成。然而，不透明度:0的功能等同于可见性:隐藏，并且不会重新触发布局步骤。

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