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


当前回答

除了所有其他答案外,IE8还有一个重要的区别:如果你使用display:none并试图获取元素的宽度或高度,IE8将返回0(而其他浏览器将返回实际的大小)。IE8仅为可见性返回正确的宽度或高度:隐藏。

其他回答

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

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

可见性:隐藏保留空间;显示:没有没有。

显示:没有

它将从页面的正常流程中删除元素,允许其他元素填充。

一个元素将不会出现在页面上,但我们仍然可以通过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则捕获事件

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

显示:没有;既不会显示元素,也不会在页面上为元素分配空间,而可见性:隐藏;不会在页面上显示元素,但会在页面上分配空间。 在这两种情况下,我们都可以访问DOM中的元素。 为了更好地理解它,请查看以下代码: 显示:无vs可见性:隐藏