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。
与此类似的情况相比，如果你前面有人穿上了隐形斗篷。在观看这条线时，它看起来像有一个空白的空间，但人们无法真正填补那个空白，因为有人仍然在那里。这就像可见性:隐藏。
有一件事值得补充，尽管它没有被问到，是有第三个选项，使对象完全透明。考虑:
1 <a href="http://example.com" style="display: none;"> < / >链接。< br / > <a href="http://example.com" style="可见性:隐藏;"> < / >链接。< br / > <a href="http://example.com" style="不透明度:0;"> < / >链接。
(请务必点击上面的“运行代码片段”按钮查看结果。)
1和2之间的区别已经指出了(即2仍然占据空间)。但是，2和3之间有区别:在情况3中，鼠标停留在链接上时仍然会切换到手，用户仍然可以单击链接，Javascript事件仍然会在链接上触发。这通常不是你想要的行为(但有时可能是?)
另一个区别是，如果你选择文本，然后复制/粘贴为纯文本，你会得到以下结果:
1st link.
2nd link.
3rd unseen link.
在情况3中，文本被复制了。也许这对于某种类型的水印是有用的，或者如果你想隐藏一个版权声明，如果一个粗心的用户复制/粘贴你的内容会显示出来?
这种差异不仅体现在样式上，还体现在使用JavaScript操作元素时的行为上。
显示效果及副作用:无:
目标元素从文档流中取出(不影响其他元素的布局); 所有的后代都会受到影响(也不会显示出来，并且不能“跳出”这个继承); 测量不能用于目标元素，也不能用于它的后代元素——它们根本不被渲染，因此它们的clientWidth, clienttheight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect()， getComputedStyle()，都返回0。
可见性的影响和副作用:隐藏:
目标元素从视图中隐藏，但没有从流中取出并影响布局，占用其正常空间; 目标元素及其后代的innerText(但不是innerHTML)返回空字符串。
总结所有其他答案:
| 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元素并且你将它们变为可见，它将导致每个元素的回流。(我不太明白)
可见性:隐藏保留空间;显示:没有没有。
