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中占据可视空间。我希望这可以清除一切