display：none和HTML元素的高度和宽度等于0有什么区别？

Question

如果我们想使元素从页面完全消失，我们可以使用CSS属性值display:none

我们也可以有效地隐藏元素与visibility:hidden，但该元素仍然会乘坐空间就好像它是有这我不想要。

所以，如果我想其实隐藏元素但使用display:none，我看到的width和height等于明确地设置为元素的0的选项。

这两者之间的语义差异是什么？

Answer 1

没有高度或宽度的元件仍然具有裕度和/或边界和仍将围绕由它的存在的元素树的影响，例如浮动和明确的规则。只有具有display: none的元素才是真正的不存在。

Answer 2

display:none需要的元素出来的页面，让屏幕阅读器无法看到它。如果你想从dom中完全移除元素，你应该使用display: none，否则它会做同样的事情。

.hidden { 
    visibility: hidden; 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 

Answer 3

display属性告诉浏览器如何显示元素。显示：none表示该元素根本不会出现在页面上。将没有空间分配它。它将被隐藏。但是，如果你给高度和宽度为0px;那么在这种情况下，内容将出现，并且内容将在div外溢出。