CSS规则visibility:hidden和display:none都会导致元素不可见。这些是同义词吗?
当前回答
显示:没有
它将从页面的正常流程中删除元素，允许其他元素填充。
一个元素将不会出现在页面上，但我们仍然可以通过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则捕获事件
其他回答
可见性:隐藏对象仍然占据垂直高度的页面。与显示:无它是完全删除。如果你在图片下面有文字，并且你设置了display:none，那么文字会向上移动以填充图片所在的位置。如果你做可见性:隐藏文本将保持在相同的位置。
它们不是同义词。
Display:none将元素从页面的正常流程中移除，允许其他元素填充。
可见性:隐藏将元素留在页面的正常流程中，这样仍然会占用空间。
想象一下，你正在游乐园排队，排队的人非常吵闹，保安把他们从队伍中拉了出来。然后排队的每个人都向前移动一个位置来填补现在的空缺。这就像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元素并且你将它们变为可见，它将导致每个元素的回流。(我不太明白)
它们不是同义词——display:没有一个会从页面流中移除元素，页面的其余部分就像它不存在一样。
可见性:hidden在视图中隐藏元素，但不隐藏页面流，在页面上为其留下空间。
