CSS属性：显示与可见性

Question

显示属性和可见性属性之间有何区别？

Answer 1

该visibility属性仅告诉浏览器是否显示元素。它是可见的（visible-您可以看到）或不可见的（hidden-您看不到）。

该display属性告诉浏览器如何绘制和显示元素（如果有的话）-是否应将其显示为inline元素（即，它与文本和其他内联元素一起流动）还是block-level元素（即，具有height和width属性，你可以设置，它的浮动等），或inline-block（即它的作用就像一个黑匣子，但奠定了直列代替）和其他一些人（list-item，table，table-row，table-cell，flex，等）。

当您将元素设置为，display: block但又将 set设置visibility: hidden为时，浏览器仍将其视为块元素，除非您看不到它。有点像是将一个红色框堆叠在一个看不见的框之上：该红色框看起来好像漂浮在空中，而实际上却位于一个看不见的物理框之上。

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

Answer 2

可见性：隐藏；

• 该元素将不会被绘制并且不会接收到单击/触摸事件，但是它占用的空间仍然被占用

• 因为它仍然用于布局目的，所以您可以在不可见的情况下对其进行测量

• 更改内容仍会花费时间进行重排/布局页面

• 可见性是继承的，因此这意味着您可以通过给子级提供可见性来使其可见。

显示：无；

• 将使元素不参与流程/布局

• 可以（取决于使用的浏览器）杀死Flash电影和iframe（在再次显示时将重新启动/重新加载），尽管您可以防止iframe发生这种情况

• 元素不会占用任何空间。出于布局目的，好像它不存在

• 会使某些浏览器/设备（如iPad）直接取回该元素使用的内存，如果在动画过程中在一个值和另一个值之间切换时会引起小的混合

额外说明：

• 隐藏内容中的图片：在所有流行的浏览器中，图片仍会加载，即使它们位于具有可见性的任何元素中：或显示：无；

• 隐藏内容中的字体： Webkit浏览器（Chrome / Safari）可能会延迟加载仅用于隐藏元素的自定义字体，包括通过可见性或显示方式。这可能会导致您测量在加载自定义字体之前仍使用后备字体的元素。

Answer 3

显示：无；将从DOM中删除DOM元素的视觉样式/物理空间，而visible：hidden; 不会删除该元素，而只是将其隐藏。因此，在将div设置为visible时，在DOM中占据300像素垂直空间的div仍将占据300像素垂直宽度。但是设置为display：none; 它的视觉风格被隐藏起来，然后由于缺少更好的单词而“释放”了空间。

[编辑]-前一阵子，我写了上面的文章，无论我是否知识不足或日子不好，我不知道，但现实是，该元素永远不会从DOM层次结构中删除。使用display：none时，所有块级显示“样式”都完全“隐藏”，而具有visible：hidden; 元素本身是隐藏的，但仍在DOM中占据可视空间。我希望这可以清除一切