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

查看详细信息

可见性:隐藏保留空间;显示:没有没有。

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

可见性:隐藏保留文档流中的空间，即使您再也看不到它。

这取决于你在做什么，可能有也可能没有很大的区别。

当涉及到子节点时，有很大的不同。例如:如果你有一个父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将不显示。

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

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

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