可见性:隐藏和显示:无之间的区别是什么?

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

当前回答

总结所有其他答案:

visibility	display
element with visibility: hidden, is hidden for all practical purposes (mouse pointers, keyboard focus, screenreaders), but still occupies space in the rendered markup	element with display:none, is hidden for all practical purposes (mouse pointers, keyboard focus, screenreaders), and DOES NOT occupy space in the rendered markup
css transitions can be applied for visibility changes	css transitions can not be applied on display changes
you can make a parent visibility:hidden but a child with visibility: visible would still be shown	when parent is display:none, children can't override and make themselves visible
part of the DOM tree (so you can still target it with DOM queries)	part of the DOM tree (so you can still target it with DOM queries)
part of the render tree	NOT part of the render tree
any reflow / layout in the parent element or child elements, would possibly trigger a reflow in these elements as well, as they are part of the render tree.	any reflow / layout in the parent element, would not impact these elements, as these are not part of the render tree
toggling between visibility: hidden and visible, would possibly not trigger a reflow / layout. (According to this comment it does: What is the difference between visibility:hidden and display:none? and possibly according to this as well https://developers.google.com/speed/docs/insights/browser-reflow)	toggling between display:none to display: (something else), would lead to a layout /reflow as this element would now become part of the render tree
you can measure the element through DOM methods	you can not measure the element or its descendants using DOM methods
If you have a huge number of elements using visibility: none on the page, the browser might hang while rendering, as all these elements require layout, even though they are not shown	If you have a huge number of elements using display:none, they wouldn't impact the rendering as they are not part of the render tree

资源:

https://developers.google.com/speed/docs/insights/browser-reflow http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/ visibility:hidden和display:none

其他信息:

还有一些浏览器支持特性，但它们似乎适用于非常老的浏览器，在其他答案中也有，所以我在这里没有讨论它们。还有其他一些隐藏元素的方法，比如不透明度，或者屏幕外的绝对定位。所有这些方法在一些或其他的回答中都有涉及，并且都有一些缺点。根据这条评论(可见性:hidden和display:none之间的性能差异)，如果你有很多元素使用display:none并且你将其更改为display:(其他)，它将导致单个回流，而如果你有多个可见性:hidden元素并且你将它们变为可见，它将导致每个元素的回流。(我不太明白)

2021-09-18 10:50:14

其他回答

当涉及到子节点时，有很大的不同。例如:如果你有一个父div和一个嵌套的子div。所以如果你这样写:

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

在这种情况下，没有divs是可见的。但如果你这样写:

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

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

2015-01-14 09:39:16

显示:none从布局流中移除元素。

可见性:隐藏隐藏它，但离开空间。

2008-09-25 12:39:43

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

可见性:隐藏意味着与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]:隐藏结果:

test |                        | test

2008-09-25 12:40:05

这里有很多详细的答案，但我认为我应该加上这一点来解决可访问性问题，因为其中有影响。

显示:没有;可见性:隐藏;可能不是所有屏幕阅读器软件都能读取。记住视力受损的用户将会经历什么。

这个问题还问了同义词。indent: -9999 px;是另一个大致相等的。文本缩进的重要区别在于它通常由屏幕阅读器读取。这可能是一个有点糟糕的体验，因为用户仍然可以点击链接。

对于可访问性，我现在看到的是一种样式的组合，在对屏幕阅读器可见的情况下隐藏元素。

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

一个很好的做法是创建一个“跳转到内容”链接到内容主体的锚。视力受损的用户可能不想在每个页面上都听完整的导航树。使链接在视觉上隐藏。用户只需点击标签就可以访问链接。

有关可访问性和隐藏内容的更多信息，请参见:

https://webaim.org/techniques/css/invisiblecontent/ https://webaim.org/techniques/skipnav/

2020-03-04 15:48:20