CSS规则visibility:hidden和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，那么文字会向上移动以填充图片所在的位置。如果你做可见性:隐藏文本将保持在相同的位置。
可见性:隐藏将元素保留在页面中，并占用该空间，但不显示给用户。
显示:无将在页面中不可用，不占用任何空间。
它们不是同义词——display:没有一个会从页面流中移除元素，页面的其余部分就像它不存在一样。
可见性:hidden在视图中隐藏元素，但不隐藏页面流，在页面上为其留下空间。
Display:none将隐藏元素并折叠正在占用的空间，而visibility:hidden将隐藏元素并保留元素的空间。display:none也会影响一些旧版本IE和Safari中可用的javascript属性。
显示:没有;既不会显示元素，也不会在页面上为元素分配空间，而可见性:隐藏;不会在页面上显示元素，但会在页面上分配空间。 在这两种情况下，我们都可以访问DOM中的元素。 为了更好地理解它，请查看以下代码: 显示:无vs可见性:隐藏
