CSS 可见性：隐藏和显示：无之间有什么区别？

What is the difference between visibility:hidden and display:none?

提问by Chris Noe

The CSS rules visibility:hiddenand display:noneboth result in the element not being visible. Are these synonyms?

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

回答by kemiller2002

display:nonemeans that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

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

visibility:hiddenmeans that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

visibility:hidden意味着与 不同display:none，标记不可见，但在页面上为其分配了空间。标记已呈现，只是在页面上看不到。

For example:

例如：

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

Replacing [style-tag-value]with display:noneresults in:

替换[style-tag-value]为display:none结果：

test |   | test

Replacing [style-tag-value]with visibility:hiddenresults in:

替换[style-tag-value]为visibility:hidden结果：

test | ?????????????????????? | test

回答by user22151

They are not synonyms.

它们不是同义词。

display:noneremoves the element from the normal flow of the page, allowing other elements to fill in.

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

visibility:hiddenleaves the element in the normal flow of the page such that is still occupies space.

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

Imagine you are in line for a ride at an amusement park and someone in the line gets so rowdy that security plucks them from the line. Everyone in line will then move forward one position to fill the now empty slot. This is like display:none.

想象一下，您在游乐园排队等候兜风，排队的人非常吵闹，以至于安全人员将他们从队伍中拉了出来。排队的每个人都将向前移动一个位置以填充现在空的位置。这就像display:none.

Contrast this with the similar situation, but that someone in front of you puts on an invisibility cloak. While viewing the line, it will look like there is an empty space, but people can't really fill that empty looking space because someone is still there. This is like visibility:hidden.

将此与类似的情况进行对比，但您面前的某个人穿上了隐形斗篷。在查看这条线时，它看起来像是一个空白的空间，但人们无法真正填补那个空白的空间，因为有人还在那里。这就像visibility:hidden.

回答by Kip

One thing worth adding, though it wasn't asked, is that there is a third option of making the object completely transparent. Consider:

值得添加的一件事是，虽然没有被问到，但还有第三种选项可以使对象完全透明。考虑：

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.

(Be sure to click "Run code snippet" button above to see the result.)

（一定要点击上面的“运行代码片段”按钮来查看结果。）

The difference between 1 and 2 has already been pointed out (namely, 2 still takes up space). However, there is a difference between 2 and 3: in case 3, the mouse will still switch to the hand when hovering over the link, and the user can still click on the link, and Javascript events will still fire on the link. This is usually notthe behavior you want (but maybe sometimes it is?).

1 和 2 的区别已经指出（即 2 仍然占用空间）。但是，2 和 3 有一个区别：在第 3 种情况下，鼠标悬停在链接上时仍然会切换到手，并且用户仍然可以点击链接，并且 Javascript 事件仍然会在链接上触发。这通常不是您想要的行为（但有时可能是？）。

Another difference is if you select the text, then copy/paste as plain text, you get the following:

另一个区别是，如果您选择文本，然后复制/粘贴为纯文本，您会得到以下内容：

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

In case 3 the text does get copied. Maybe this would be useful for some type of watermarking, or if you wanted to hide a copyright notice that would show up if a carelessly user copy/pasted your content?

在情况 3 中，文本确实被复制了。也许这对某种类型的水印很有用，或者如果您想隐藏版权声明，如果用户不小心复制/粘贴了您的内容，则会显示该声明？

回答by mmaibaum

display:noneremoves the element from the layout flow.

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

visibility:hiddenhides it but leaves the space.

visibility:hidden隐藏它但离开了空间。

回答by Govinda

There is a big difference when it comes to child nodes. For example: If you have a parent div and a nested child div. So if you write like this:

子节点有很大的不同。例如：如果您有一个父 div 和一个嵌套的子 div。所以如果你这样写：

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

In this case none of the divs will be visible. But if you write like this:

在这种情况下，所有 div 都不可见。但是如果你这样写：

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

Then the child div will be visible whereas the parent div will not be shown.

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

回答by ConroyP

They're not synonyms - display: noneremoves the element from the flow of the page, and rest of the page flows as if it weren't there.

它们不是同义词——display: none从页面流中删除元素，页面的其余部分就好像它不存在一样流动。

visibility: hiddenhides the element from view but not the page flow, leaving space for it on the page.

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

回答by wcm

display: noneremoves the element from the page entirely, and the page is built as though the element were not there at all.

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

Visibility: hiddenleaves the space in the document flow even though you can no longer see it.

Visibility: hidden即使您再也看不到它，也会在文档流中留下空间。

This may or may not make a big difference depending on what you are doing.

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

回答by Steven Williams

With visibility:hiddenthe object still takes up vertical height on the page. With display:noneit is completely removed. If you have text beneath an image and you do display:none, that text will shift up to fill the space where the image was. If you do visibility:hidden the text will remain in the same location.

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

回答by slashnick

display:nonewill hide the element and collapse the space is was taking up, whereas visibility:hiddenwill hide the element and preserve the elements space. display:none also effects some of the properties available from javascript in older versions of IE and Safari.

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

回答by szeryf

In addition to all other answers, there's an important difference for IE8: If you use display:noneand try to get the element's width or height, IE8 returns 0 (while other browsers will return the actual sizes). IE8 returns correct width or height only for visibility:hidden.

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