visible:hidden 和 display:none 有什么区别?

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

答案

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

visible 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] visibility:hidden导致:

test |                        | test

它们不是同义词。

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

visibility:hidden将元素留在页面的正常流程中,使其仍占据空间。

想象一下,您在游乐园中排队,而排队中的某人变得粗暴到使安全人员将他们从排队中撤出。然后,排队的每个人都会向前移动一个位置,以填补现在空的位置。就像display:none

与之类似的情况则与此相反,但是在您面前的某人戴上了隐形斗篷。在查看线时,看起来好像有一个空白空间,但是人们无法真正填充那个空白的空间,因为有人还在。这就像visibility:hidden

值得补充的一件事是,尽管没有要求,但还有第三种选择可以使对象完全透明。考虑:

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 事件仍将在该链接上触发。这通常不是您想要的行为。选择文本时的行为也可能因浏览器而异。

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

visibility:hidden隐藏它但留出空间。

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

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

visibility: hidden将元素从视图中隐藏,但不从页面流中隐藏,从而在页面上为其留出空间。

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

Visibility: hidden即使您看不到它, Visibility: hidden将在文档流中留下空间。

这可能会或可能不会有很大的不同,具体取决于您在做什么。

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

display:none将隐藏元素并折叠正在占用的空间,而visibility:hidden将隐藏元素并保留元素的空间。 display:none 也不会影响 IE 和 Safari 较旧版本中 javascript 可用的某些属性。

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