CSS 属性：显示与可见性

Question

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

Answer 1

visibility

属性只告诉浏览器是否显示元素。它要么是可见的（

visible

- 你可以看到它），要么是不可见的（

hidden

- 你看不到它）。

display

属性告诉浏览器 如何 绘制和显示一个元素，如果有的话 - 它应该显示为

inline

元素（即它与文本和其他内联元素一起流动）还是

block

-level 元素（即它具有您可以设置的高度和宽度属性，它是可浮动的，等等），或一个

inline-block

（即它像一个块盒，但内联放置）和其他一些（

list-item

，

 table

,

table-row

,

table-cell

,

flex

, 等等).

当你将一个元素设置为

display: block

但also设置

visibility: hidden

时，浏览器仍将其视为块元素，只是你看不到它。有点像你如何将一个红色盒子堆叠在一个看不见的盒子之上：红色盒子看起来像是漂浮在半空中，而实际上它位于一个你看不见的物理盒子之上。

换句话说，这意味着带有

display

而不是

none

的元素仍然会影响页面中元素的流动，无论它们是否可见。带有

display: none

的元素周围的框将表现得好像该元素从未存在过（尽管它保留在 DOM 中）。

Answer 2

visibility: hidden;

• 元素不会被绘制并且不会收到点击/触摸等事件（与

  opacity: 0;

  不同的是），但它占用的空间仍然被占用。
• 因为它仍然存在用于布局目的，所以您可以在不可见的情况下测量它。
• 更改内容仍会导致页面回流/重新布局。

• visibility

  是继承的，所以这意味着你可以通过给他们

  visibility: visible;

  来让子孩子可见。

display: none;

• 将使元素不参与流/布局。
• 可以（取决于使用的浏览器）杀死 Flash 电影和 iframe（再次显示时将重新启动/重新加载），尽管您可以使用 iframe 防止这种情况发生。
• 元素不会占用任何空间。为了布局目的，它就像它不存在一样。
• 将使某些浏览器/设备（如 iPad）直接收回该元素使用的内存，如果您在动画期间在

  none

  和另一个值之间切换，会导致小问题。

补充说明：

• 图片

  hidden

  内容：
  在所有流行的浏览器中，图像仍然会被加载，即使它们在任何带有

  visibility: hidden;

  或

  display: none;

  的元素中。
• 字体

  hidden

  内容：
  

  -webkit-

  浏览器（Chrome/Safari）可能会延迟加载仅用于隐藏元素的自定义字体，包括通过

  visibility

  或

  display

  。这可能会导致您测量在加载自定义字体之前仍在使用后备字体的元素。

Answer 3

display:none 将元素从 html 流中移除，而 visibility:hidden 则不会。

Answer 4

display:none;

将从 DOM 中删除 DOM 元素视觉样式/物理空间，而

visibility:hidden;

不会删除该元素，而只是将其隐藏。因此，当设置为

<div>

时，DOM 中占据

300px

垂直空间的

300px

仍然会占据

visibility:hidden;

的垂直宽度，但是当设置为

display:none;

时，它的视觉样式和它占据的空间被隐藏，并且然后由于缺少更好的词而“释放”空间。

[编辑] - 不久前我写了上面的内容，我不知道是我知识不够还是今天过得很糟糕，但事实是，元素永远不会从 DOM 层次结构中删除。使用

display

时，所有块级

display:none

“样式”都完全“隐藏”，而使用

visibility:hidden;

时，元素本身是隐藏的，但它仍然占据 DOM 中的视觉空间。我希望这能解决问题。