题 visibility:hidden和display:none之间有什么区别?


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


928
2017-09-25 12:37


起源




答案:


display:none 意味着有问题的标签根本不会出现在页面上(尽管你仍然可以通过dom与它进行交互)。其他标签之间不会为其分配空间。

visibility:hidden 意思是不像 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] 同 visibility:hidden 结果是:

test |                        | test

1185
2017-09-25 12:40



关于一个人和另一个人的表现没有评论?我很好奇用哪种方法来隐藏绝对定位的元素,这些元素经常显示和隐藏。 - Tomáš Zato
这是一个完全猜测我还没有做过任何测试,但我猜它们大致相同。一旦屏幕上的某些内容发生变化,整个屏幕就会重新渲染(至少它已经习惯了),所以这并不重要。你仍在强制进行屏幕重绘。这可能是浏览器的浏览器,实际上可能有更好的方法来优化代码而不是专注于这些。 - kemiller2002
@Kevin是正确的 visibility: hidden 和 display: none 同样具有高效性,因为它们都会重新布局,涂料和复合材料。然而, opacity: 0 在功能上等同于 visibility: hidden 并没有重新触发布局步骤,所以如果你不介意仍然分配空的空间我会建议使用它(否则使用 display: none)。 - jayrobin
在谈论可见性与显示时,重要的是要记住css-transitions。例如,从可见性切换:隐藏;能见度:可见;允许使用css-transitions,而从display:none切换;显示:块;才不是。 visibility:hidden具有不捕获javascript事件的额外好处,而opacity:0;捕获事件。 - Michael Deal
opacity: 0 在处理输入或按钮时应谨慎使用,因为它们仍然存在并可能导致奇怪的用户交互。 - jacques mouette


它们不是同义词。

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

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

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

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


185
2017-09-25 13:50



它们之间还有另一个很大的区别:至少在Chrome中,可见性可以与转换延迟一起使用,但显示会忽略它。 - SapphireSun
所以,如果我想看不见,我应该申请 visibility:cloak? - Dan H


有一点值得补充,虽然没有被问到,但是有第三种选择可以使对象完全透明。考虑:

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.

在这种情况下,你得到:

1st link.
2nd        link.
3rd        link.

已经指出了1和2之间的差异(即,2仍然占用空间)。但是,2和3之间存在差异:在情况3中,当鼠标悬停在链接上时鼠标仍将切换到手,用户仍然可以单击链接,Javascript事件仍将在链接上触发。这通常是  你想要的行为。选择文本时的行为也可能因浏览器而异。


82
2017-10-02 21:27



为什么缩放部分? - Kawa
为什么IE会让你做什么? :)我不知道,在较新的IE版本上可能不需要缩放部分。在IE 6中肯定需要它。 - Kip
这是我发现的一篇文章,讨论整个缩放/过滤器的事情。看起来像IE一样想到对象的定位。 joseph.randomnetworks.com/archives/2006/08/16/... - Kip
@greenoldman你能提供一个例子吗?这是一个jsfiddle,其中隐藏元素(我尝试div和span)是其容器中唯一的元素,它仍然占用空间: jsfiddle.net/rmb5wdLd/1 - Kip
@Kip,很奇怪 - 我现在不能这样做(我也改变了自己的项目)。好的,我最好删除我之前的评论,当我有一个可靠的测试用例时,我会展示它,对不起噪音。 - greenoldman


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

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


74
2017-09-25 12:39





在子节点方面有很大的不同。例如:如果您有父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将不会显示。


53
2018-01-14 09:39



孩子的例子很棒。 - Edgar Martinez
好点,这很容易错过。 display:none / block不会触发转换,所以使用visibility:hidden可以工作,但子元素也需要vilibility:同时隐藏 - Drenai
那是个很好的观点。谢谢@Govinda - lakshman_dev


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

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


17
2017-09-25 12:41





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

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

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


14
2017-09-25 12:40



使用$('#element')。remove()完全删除页面中的元素(DOM)。不显示或不显示空间并不意味着删除它。您仍然可以使用简单的$('#element')。show()更改其状态,因此不会“完全删除”。 - foxontherock


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


11
2017-09-25 12:41



隐藏,只是保留空间的垂直维度。水平怎么样? - Chris Noe
水平尺寸也会保留。 - JB Hurteaux


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


10
2017-09-25 12:41





如果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>

查看详情


6
2017-12-27 05:25