CSS规则visibility:hidden和display:none都会导致元素不可见。这些是同义词吗?


当前回答

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

其他回答

总结所有其他答案:

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: none将元素从页面中完全移除,并且构建页面时就好像该元素根本不存在一样。

可见性:隐藏保留文档流中的空间,即使您再也看不到它。

这取决于你在做什么,可能有也可能没有很大的区别。

当涉及到子节点时,有很大的不同。例如:如果你有一个父div和一个嵌套的子div。所以如果你这样写:

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

在这种情况下,没有divs是可见的。但如果你这样写:

<div id="parent" style="visibility:hidden;">
    <div id="child" style="visibility:visible;"></div>
</div>

然后子div将可见,而父div将不显示。

这种差异不仅体现在样式上,还体现在使用JavaScript操作元素时的行为上。

显示效果及副作用:无:

目标元素从文档流中取出(不影响其他元素的布局); 所有的后代都会受到影响(也不会显示出来,并且不能“跳出”这个继承); 测量不能用于目标元素,也不能用于它的后代元素——它们根本不被渲染,因此它们的clientWidth, clienttheight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(),都返回0。

可见性的影响和副作用:隐藏:

目标元素从视图中隐藏,但没有从流中取出并影响布局,占用其正常空间; 目标元素及其后代的innerText(但不是innerHTML)返回空字符串。

显示:没有;既不会显示元素,也不会在页面上为元素分配空间,而可见性:隐藏;不会在页面上显示元素,但会在页面上分配空间。 在这两种情况下,我们都可以访问DOM中的元素。 为了更好地理解它,请查看以下代码: 显示:无vs可见性:隐藏