CSS规则visibility:hidden和display:none都会导致元素不可见。这些是同义词吗?
当前回答
如果可视性属性设置为“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>
查看详细信息
其他回答
显示:没有;既不会显示元素,也不会在页面上为元素分配空间,而可见性:隐藏;不会在页面上显示元素,但会在页面上分配空间。 在这两种情况下,我们都可以访问DOM中的元素。 为了更好地理解它,请查看以下代码: 显示:无vs可见性:隐藏
Display:none将隐藏元素并折叠正在占用的空间,而visibility:hidden将隐藏元素并保留元素的空间。display:none也会影响一些旧版本IE和Safari中可用的javascript属性。
它们不是同义词——display:没有一个会从页面流中移除元素,页面的其余部分就像它不存在一样。
可见性:hidden在视图中隐藏元素,但不隐藏页面流,在页面上为其留下空间。
当涉及到子节点时,有很大的不同。例如:如果你有一个父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将不显示。
可见性:隐藏将元素保留在页面中,并占用该空间,但不显示给用户。
显示:无将在页面中不可用,不占用任何空间。