CSS规则visibility:hidden和display:none都会导致元素不可见。这些是同义词吗?


当前回答

正如在这个堆栈的其他地方所描述的,这两者并不是同义词。Visibility:hidden将在页面上留下空白,而display:none将完全隐藏元素。我认为有必要讨论一下这是如何影响给定元素的子元素的。如果你要使用visibility:hidden,那么你可以用正确的样式显示该元素的子元素。但是对于display:none,不管你是否使用display: block | flex | inline | grid | inline-block,你都会隐藏子元素。

其他回答

显示:none从布局流中移除元素。

可见性:隐藏隐藏它,但离开空间。

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

可见性:隐藏对象仍然占据垂直高度的页面。与显示:无它是完全删除。如果你在图片下面有文字,并且你设置了display:none,那么文字会向上移动以填充图片所在的位置。如果你做可见性:隐藏文本将保持在相同的位置。

有一件事值得补充,尽管它没有被问到,是有第三个选项,使对象完全透明。考虑:

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中,文本被复制了。也许这对于某种类型的水印是有用的,或者如果你想隐藏一个版权声明,如果一个粗心的用户复制/粘贴你的内容会显示出来?

如果可视性属性设置为“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>

查看详细信息