visibility:hidden和display:none之间有什么区别？

display:none 从布局流中删除元素.

visibility:hidden 隐藏它但留下了空间.

在子节点方面有很大的不同.例如:如果您有父div和嵌套子div.所以,如果你这样写:

在这种情况下,没有一个div可见.但如果你这样写:

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

它们不是同义词 - display: none从页面流中删除元素,页面的其余部分就像它不存在一样流动.

visibility: hidden 隐藏视图中的元素,但不隐藏页面流,在页面上留出空间.

display: none 完全从页面中删除元素,并且构建页面就像元素根本不存在一样.

Visibility: hidden 即使您无法再看到它,也会留下文档流中的空间.

这可能会也可能不会产生很大的不同,这取决于你在做什么.

随着visibility:hidden对象仍占用垂直高度在页面上.随着display:none它完全删除.如果您在图像下方有文字,那么display:none该文本将向上移动以填充图像所在的空间.如果您执行可见性:隐藏文本将保留在同一位置.

display:none将隐藏元素并折叠占用的空间,而visibility:hidden隐藏元素并保留元素空间.display:none也会影响旧版IE和Safari中javascript提供的一些属性.

除了所有其他答案之外,IE8还有一个重要区别:如果您使用display:none并尝试获取元素的宽度或高度,IE8将返回0(而其他浏览器将返回实际大小).IE8仅返回正确的宽度或高度visibility:hidden.

visibility:hidden保留空间; display:none没有.

display: none; 

它不会在页面上显示,也不占用任何空间.

visibility: hidden; 

它隐藏了一个元素,但它仍然会占用与以前相同的空间.该元素将被隐藏,但仍会影响布局.

visibility: hidden保留空间,display: none而不保留空间.

显示无示例:https://www.w3schools.com/css/tryit.asp？filename = trycss_display_none

能见度隐藏示例:https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

如果将visibility属性设置为"hidden",则浏览器仍会在页面上占用内容空间,即使它不可见.
但是当我们将对象设置为时"display:none",浏览器不会在页面上为其内容分配空间.

例:

Content not display on screen and even space not taken.



Content not display on screen but it will take space on screen.

查看详情