CSS规则visibility:hidden和display:none都会导致元素不可见。这些是同义词吗?
当前回答
display: none;
它将不会出现在页面上，也不会占用任何空间。
visibility: hidden;
它隐藏了一个元素，但它仍然会占用与之前相同的空间。元素将被隐藏，但仍然会影响布局。
可见性:隐藏保留空间，而显示:无不保留空间。
无示例:https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none
示例:https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility
其他回答
可见性:隐藏对象仍然占据垂直高度的页面。与显示:无它是完全删除。如果你在图片下面有文字，并且你设置了display:none，那么文字会向上移动以填充图片所在的位置。如果你做可见性:隐藏文本将保持在相同的位置。
display: none;
它将不会出现在页面上，也不会占用任何空间。
visibility: hidden;
它隐藏了一个元素，但它仍然会占用与之前相同的空间。元素将被隐藏，但仍然会影响布局。
可见性:隐藏保留空间，而显示:无不保留空间。
无示例:https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none
示例:https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility
Display:none将隐藏元素并折叠正在占用的空间，而visibility:hidden将隐藏元素并保留元素的空间。display:none也会影响一些旧版本IE和Safari中可用的javascript属性。
如果可视性属性设置为“hidden”，浏览器仍然会在页面上为内容占用空间，即使它是不可见的。 但是当我们将一个对象设置为“display:none”时，浏览器不会在页面上为其内容分配空间。
例子:
<div style="display:none">
Content not display on screen and even space not taken.
</div>
<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>
查看详细信息
总结所有其他答案:
| 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元素并且你将它们变为可见，它将导致每个元素的回流。(我不太明白)
