它们不是同义词——display:没有一个会从页面流中移除元素，页面的其余部分就像它不存在一样。

可见性:hidden在视图中隐藏元素，但不隐藏页面流，在页面上为其留下空间。

这种差异不仅体现在样式上，还体现在使用JavaScript操作元素时的行为上。

显示效果及副作用:无:

目标元素从文档流中取出(不影响其他元素的布局); 所有的后代都会受到影响(也不会显示出来，并且不能“跳出”这个继承); 测量不能用于目标元素，也不能用于它的后代元素——它们根本不被渲染，因此它们的clientWidth, clienttheight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect()， getComputedStyle()，都返回0。

可见性的影响和副作用:隐藏:

目标元素从视图中隐藏，但没有从流中取出并影响布局，占用其正常空间; 目标元素及其后代的innerText(但不是innerHTML)返回空字符串。

如果可视性属性设置为“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仅为可见性返回正确的宽度或高度:隐藏。

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

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