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将不显示。
其他回答
显示:none从布局流中移除元素。
可见性:隐藏隐藏它,但离开空间。
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
可见性:隐藏保留空间;显示:没有没有。
它们不是同义词——display:没有一个会从页面流中移除元素,页面的其余部分就像它不存在一样。
可见性:hidden在视图中隐藏元素,但不隐藏页面流,在页面上为其留下空间。
另一个区别是可见性:hidden在非常非常老的浏览器中有效,而display:none则不行:
https://www.w3schools.com/cssref/pr_class_visibility.asp
https://www.w3schools.com/cssref/pr_class_display.asp