CSS规则visibility:hidden和display:none都会导致元素不可见。这些是同义词吗?
当前回答
这种差异不仅体现在样式上，还体现在使用JavaScript操作元素时的行为上。
显示效果及副作用:无:
目标元素从文档流中取出(不影响其他元素的布局); 所有的后代都会受到影响(也不会显示出来，并且不能“跳出”这个继承); 测量不能用于目标元素，也不能用于它的后代元素——它们根本不被渲染，因此它们的clientWidth, clienttheight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect()， getComputedStyle()，都返回0。
可见性的影响和副作用:隐藏:
目标元素从视图中隐藏，但没有从流中取出并影响布局，占用其正常空间; 目标元素及其后代的innerText(但不是innerHTML)返回空字符串。
其他回答
可见性:隐藏保留空间;显示:没有没有。
显示:none从布局流中移除元素。
可见性:隐藏隐藏它，但离开空间。
除了所有其他答案外，IE8还有一个重要的区别:如果你使用display:none并试图获取元素的宽度或高度，IE8将返回0(而其他浏览器将返回实际的大小)。IE8仅为可见性返回正确的宽度或高度:隐藏。
可见性:隐藏对象仍然占据垂直高度的页面。与显示:无它是完全删除。如果你在图片下面有文字，并且你设置了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元素并且你将它们变为可见，它将导致每个元素的回流。(我不太明白)
