CSS规则visibility:hidden和display:none都会导致元素不可见。这些是同义词吗?
当前回答
它们不是同义词——display:没有一个会从页面流中移除元素,页面的其余部分就像它不存在一样。
可见性:hidden在视图中隐藏元素,但不隐藏页面流,在页面上为其留下空间。
其他回答
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
有一件事值得补充,尽管它没有被问到,是有第三个选项,使对象完全透明。考虑:
1 <a href="http://example.com" style="display: none;"> < / >链接。< br / > <a href="http://example.com" style="可见性:隐藏;"> < / >链接。< br / > <a href="http://example.com" style="不透明度:0;"> < / >链接。
(请务必点击上面的“运行代码片段”按钮查看结果。)
1和2之间的区别已经指出了(即2仍然占据空间)。但是,2和3之间有区别:在情况3中,鼠标停留在链接上时仍然会切换到手,用户仍然可以单击链接,Javascript事件仍然会在链接上触发。这通常不是你想要的行为(但有时可能是?)
另一个区别是,如果你选择文本,然后复制/粘贴为纯文本,你会得到以下结果:
1st link.
2nd link.
3rd unseen link.
在情况3中,文本被复制了。也许这对于某种类型的水印是有用的,或者如果你想隐藏一个版权声明,如果一个粗心的用户复制/粘贴你的内容会显示出来?
它们不是同义词。
Display:none将元素从页面的正常流程中移除,允许其他元素填充。
可见性:隐藏将元素留在页面的正常流程中,这样仍然会占用空间。
想象一下,你正在游乐园排队,排队的人非常吵闹,保安把他们从队伍中拉了出来。然后排队的每个人都向前移动一个位置来填补现在的空缺。这就像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与它交互。 在其他元素之间不会为它分配空间。
可见性:隐藏
它会将元素保留在页面的正常流程中,这样仍然会占用空间。
一个元素是不可见的,并且在页面上为它分配了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则捕获事件