CSS规则visibility:hidden和display:none都会导致元素不可见。这些是同义词吗?
当前回答
显示:没有;既不会显示元素，也不会在页面上为元素分配空间，而可见性:隐藏;不会在页面上显示元素，但会在页面上分配空间。 在这两种情况下，我们都可以访问DOM中的元素。 为了更好地理解它，请查看以下代码: 显示:无vs可见性:隐藏
其他回答
可见性:隐藏保留空间;显示:没有没有。
显示:none从布局流中移除元素。
可见性:隐藏隐藏它，但离开空间。
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
当涉及到子节点时，有很大的不同。例如:如果你有一个父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将不显示。
除了所有其他答案外，IE8还有一个重要的区别:如果你使用display:none并试图获取元素的宽度或高度，IE8将返回0(而其他浏览器将返回实际的大小)。IE8仅为可见性返回正确的宽度或高度:隐藏。
