提问



CSS规则visibility:hiddendisplay:none都导致元素不可见。这些同义词是?

最佳参考


display:none表示相关标签根本不会出现在页面上(尽管您仍然可以通过dom与其进行交互)。其他标签之间不会为其分配空间。


visibility:hidden表示与display:none不同,标签不可见,但在页面上为其分配空间。标记被渲染,它只是在页面上看不到。


例如:


test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test


display:none替换[style-tag-value]会导致:


test |   | test


visibility:hidden替换[style-tag-value]会导致:


test |                        | test

其它参考1


它们不是同义词。


display:none从页面的正常流中移除元素,允许其他元素填充。


visibility:hidden将元素留在页面的正常流中,这样仍然占用空间。


想象一下,你正准备在游乐园里乘车,而且线路上有人会如此吵闹,以至于安全人员将他们从线路中拽出来。然后排队的每个人都会向前移动一个位置来填补现在的空位。这就像display:none


与此类似的情况形成鲜明对比,但是在你面前有人穿上隐身斗篷。在查看线条时,它看起来似乎有一个空的空间,但是人们不能真正填满那个空洞的空间,因为有人还在那里。这就像visibility:hidden

其它参考2


有一点值得补充,虽然没有问,是否有第三种方法可以使对象完全透明。考虑:




1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.



display:none从布局流程中删除元素。


visibility:hidden隐藏它但留下了空间。

其它参考3


在子节点方面有很大的不同。例如:如果您有父div和嵌套子div。所以,如果你这样写:


<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>


在这种情况下,没有一个div可见。但如果你这样写:


<div id="parent" style="visibility:hidden;">
     <div id="child" style="visibility:visible;"></div>
</div>


然后子div将可见,而父div将不会显示。

其它参考4


他们不是同义词 - display: none从页面流中删除元素,页面的其余部分就像它不在那里一样流动。


visibility: hidden隐藏视图中的元素,但不隐藏页面流,在页面上留出空间。

其它参考5


display: none完全从页面中删除元素,并且构建页面就像元素根本不存在一样。


Visibility: hidden即使您无法再看到它,也会留下文档流中的空间。


这可能会也可能不会产生很大的不同,这取决于你在做什么。

其它参考6


使用visibility:hidden时,对象仍占据页面的垂直高度。随着display:none,它被完全删除。如果您在图像下方有文字并且执行display:none,则该文本将向上移动以填充图像所在的空间。如果您执行可见性:隐藏文本将保留在同一位置。

其它参考7


display:none将隐藏元素并折叠占用的空间,而visibility:hidden将隐藏元素并保留元素空间。 display:none也会影响旧版IE和Safari中javascript提供的一些属性。

其它参考8


如果visibility属性设置为"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>


查看详细信息[50]

其它参考9


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

其它参考10


visibility:hidden会将元素保留在页面中并占用该空间但不会向用户显示。


display:none将无法在页面中显示,也不会占用任何空间。

其它参考11


visibility:hidden隐藏了一个元素,但它仍然会占用与以前相同的空间。该元素将被隐藏,但仍会影响布局。


display:none隐藏了一个元素,它不会占用任何空间。元素将被隐藏,页面将显示为元素不存在:

其它参考12


visibility:hidden保留空间,而display:none不保留空间。

其它参考13


另一个不同之处在于visibility:hidden适用于真正古老的浏览器,而display:none则不然:


https://www.w3schools.com/cssref/pr_class_visibility.asp[51]


https://www.w3schools.com/cssref/pr_class_display.asp[52]

其它参考14


display: none; 


它不会在页面上显示,也不占用任何空间。



visibility: hidden; 


它隐藏了一个元素,但它仍然会占用与以前相同的空间。该元素将被隐藏,但仍会影响布局。


visibility: hidden保留空间,而display: none不保留空间。


显示无示例:https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none [53]


可见性隐藏示例:https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility [54]

其它参考15


display:none;既不会显示元素,也不会为页面上的元素分配空间,而visibility:hidden;不会在页面上显示元素,但会在页面上分配空格。
在这两种情况下,我们都可以访问DOM中的元素。
要以更好的方式理解它,请查看以下代码:
display:none vs visibility:hidden [55]