CSS规则visibility:hidden和display:none都会导致元素不可见。这些是同义词吗?
当前回答
可见性:隐藏将元素保留在页面中,并占用该空间,但不显示给用户。
显示:无将在页面中不可用,不占用任何空间。
其他回答
除了所有其他答案外,IE8还有一个重要的区别:如果你使用display:none并试图获取元素的宽度或高度,IE8将返回0(而其他浏览器将返回实际的大小)。IE8仅为可见性返回正确的宽度或高度:隐藏。
可见性:隐藏保留空间;显示:没有没有。
显示:没有
它将从页面的正常流程中删除元素,允许其他元素填充。
一个元素将不会出现在页面上,但我们仍然可以通过DOM与它交互。 在其他元素之间不会为它分配空间。
可见性:隐藏
它会将元素保留在页面的正常流程中,这样仍然会占用空间。
一个元素是不可见的,并且在页面上为它分配了element的空间。
其他隐藏元素的方法
使用z - index
#element {
z-index: -11111;
}
将元素移出页面
#element {
position: absolute;
top: -9999em;
left: -9999em;
}
关于可见性:hidden和display: none属性的有趣信息
可见性:隐藏和显示:没有一个会是同样的表现,因为它们都会重新触发布局,油漆和合成。然而,不透明度:0的功能等同于可见性:隐藏,并且不会重新触发布局步骤。
css转换属性也很重要,我们需要注意。因为从可见性:hidden切换到可见性:visible允许使用css转换,而从display: none切换到display: block则不行。visibility: hidden具有不捕获JavaScript事件的额外好处,而opacity: 0则捕获事件
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:none,那么文字会向上移动以填充图片所在的位置。如果你做可见性:隐藏文本将保持在相同的位置。