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


当前回答

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

其他回答

总结所有其他答案:

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元素并且你将它们变为可见,它将导致每个元素的回流。(我不太明白)

显示:没有

它将从页面的正常流程中删除元素,允许其他元素填充。

一个元素将不会出现在页面上,但我们仍然可以通过DOM与它交互。 在其他元素之间不会为它分配空间。

可见性:隐藏

它会将元素保留在页面的正常流程中,这样仍然会占用空间。

一个元素是不可见的,并且在页面上为它分配了element的空间。

其他隐藏元素的方法

使用z - index

#element {
   z-index: -11111;
}

将元素移出页面

#element {
   position: absolute; 
   top: -9999em;
   left: -9999em;
}

关于可见性:hidden和display: none属性的有趣信息

可见性:隐藏和显示:没有一个会是同样的表现,因为它们都会重新触发布局,油漆和合成。然而,不透明度:0的功能等同于可见性:隐藏,并且不会重新触发布局步骤。

css转换属性也很重要,我们需要注意。因为从可见性:hidden切换到可见性:visible允许使用css转换,而从display: none切换到display: block则不行。visibility: hidden具有不捕获JavaScript事件的额外好处,而opacity: 0则捕获事件

另一个区别是可见性:hidden在非常非常老的浏览器中有效,而display:none则不行:

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

可见性:隐藏保留空间;显示:没有没有。

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

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

这个问题还问了同义词。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/