CSS属性：显示与可见性

Question

显示与可见性属性有什么区别？

Answer 1

visibility属性仅告知浏览器是否显示元素。它可见（visible - 你可以看到它），或者看不见（hidden - 你看不到它。）

display属性告诉浏览器如何绘制并显示一个元素（如果有的话） - 它是否应显示为inline元素（即它与文本和其他内联元素）或block - 级元素（即它具有您可以设置的高度和宽度属性，它可以浮动等），或者inline-block（即它就像一个块框）但是内联而且是其他一些（list-item，table，table-row，table-cell，flex等。

当您将元素设置为display: block但也设置visibility: hidden时，浏览器仍会将其视为块元素，除非您没有看到它。有点像你在一个看不见的盒子上堆叠一个红色的盒子：红色的盒子看起来像漂浮在半空中，而实际上它是坐在你看不见的物理盒子的顶部。

换句话说，这意味着display不是none的元素仍会影响页面中元素的流动，无论它们是否可见。围绕具有display: none的元素的框将表现为该元素从未存在（尽管它保留在DOM中）。

Answer 2

可见性：隐藏;

• 元素不会被绘制且不接收点击/触摸事件，但它占用的空间仍然被占用
• 因为它仍然存在用于布局目的，您可以在不显示
的情况下进行测量
• 更改内容仍需花费时间重排/布局页面
• 继承可见性，因此这意味着您可以通过为子可见性提供可见性：可见;

显示：无;

• 将使元素不参与流/布局
• 可以（取决于使用的浏览器）杀死Flash电影和iframe（会在重新显示时重新启动/重新加载），尽管您可以使用iframe阻止这种情况发生
• 元素不会占用任何空间。出于布局目的，它就像它不存在一样
• 会使某些浏览器/设备（如iPad）直接夺回该元素使用的内存，如果您在动画期间在无和其他值之间切换，则会导致小的hickup

额外说明：

所有流行浏览器中的
• 隐藏内容中的图片仍然会加载图片，即使它们位于任何具有可见性的元素内：隐藏;或显示：无;
隐藏内容中的
• 字体：webkit浏览器（Chrome / Safari）可能会延迟加载仅在隐藏元素中使用的自定义字体，包括通过可见性或显示。这可能会导致您在加载自定义字体之前测量仍使用后备字体的元素。

Answer 3

display：none从html流中删除元素，而visibility：hidden则不会。

Answer 4

显示：无;将从DOM中删除DOM元素视觉样式/物理空间，而可见性：隐藏;不会删除元素，只是隐藏它。因此，在设置为可见性时，在DOM中占据300px垂直空间的div将仍然占据300px的垂直宽度：隐藏;但是当设置为display：none;它的视觉风格和它所占据的空间是隐藏的，然后空间被“释放”，因为没有更好的词。

[编辑] - 过去一段时间我写了上面的内容，无论我是否知识不足或有不好的一天，我都不知道，但实际情况是，元素永远不会从DOM中删除层次结构。使用display：none时，所有块级别显示“样式”都完全“隐藏”，而可见性：隐藏;元素本身是隐藏的，但它仍占据DOM中的可视空间。我希望这可以解决问题