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
其他回答
这种差异不仅体现在样式上，还体现在使用JavaScript操作元素时的行为上。
显示效果及副作用:无:
目标元素从文档流中取出(不影响其他元素的布局); 所有的后代都会受到影响(也不会显示出来，并且不能“跳出”这个继承); 测量不能用于目标元素，也不能用于它的后代元素——它们根本不被渲染，因此它们的clientWidth, clienttheight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect()， getComputedStyle()，都返回0。
可见性的影响和副作用:隐藏:
目标元素从视图中隐藏，但没有从流中取出并影响布局，占用其正常空间; 目标元素及其后代的innerText(但不是innerHTML)返回空字符串。
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
Display:none将隐藏元素并折叠正在占用的空间，而visibility:hidden将隐藏元素并保留元素的空间。display:none也会影响一些旧版本IE和Safari中可用的javascript属性。
它们不是同义词——display:没有一个会从页面流中移除元素，页面的其余部分就像它不存在一样。
可见性:hidden在视图中隐藏元素，但不隐藏页面流，在页面上为其留下空间。
总结所有其他答案:
| 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元素并且你将它们变为可见，它将导致每个元素的回流。(我不太明白)
