【发布时间】：2011-03-29 08:31:55
【问题描述】：
Display 与 Visibility 属性有什么区别？
【问题讨论】：
-
@KennyTM：假设 OP 专门要求比较每个属性的相应值。
标签： css
【发布时间】：2011-03-29 08:31:55
【问题描述】：
visibility 属性只告诉浏览器是否显示一个元素。它要么可见（visible - 你可以看到），要么不可见（hidden - 你看不到）。
display 属性告诉浏览器如何 绘制和显示一个元素，如果有的话 - 它是否应该显示为 inline 元素（即它与文本和其他内联元素一起流动元素）或block-level 元素（即，它具有可以设置的高度和宽度属性，它是可浮动的等），或inline-block（即，它的作用类似于块框，但改为内联）和一些其他（list-item、table、table-row、table-cell、flex 等）。
当您将一个元素设置为display: block 但也 设置visibility: hidden 时，浏览器仍将其视为块元素，只是您看不到它。有点像您如何将一个红色盒子堆叠在一个看不见的盒子上：红色盒子看起来像是漂浮在半空中，而实际上它位于一个您看不到的物理盒子的顶部。
换句话说，这意味着带有display 而不是none 的元素仍然会影响页面中元素的流动，无论它们是否可见。用display: none 包围元素的框会表现得好像该元素从未存在过（尽管它仍保留在 DOM 中）。
【讨论】：
-
.. 显示与 DOM 无关？例如...如果您有
display: none;，那么该元素会从DOM 中删除吗？还是我完全糊涂了？ -
@Hristo：实际上并没有。您可以永远仅使用 CSS 影响元素在 DOM 中的位置或存在。
-
@BoltClock... 是的，你是对的。我意识到你永远不能从 DOM 中取出一个元素，而只会影响它在 DOM 中的显示方式。听起来更准确吗？
-
需要注意的重要一点是，通过使用 jQuery 的 hide() 方法，它在内部将 display 设置为 none，您无法获取此元素的位置。虽然使用可见性，但您可以做到。
可见性：隐藏；
- 元素不会被绘制并且不会接收点击/触摸事件，但它占用的空间仍然被占用
- 因为它仍然存在用于布局目的，所以您可以在不可见的情况下对其进行测量
- 更改内容仍将花费时间重排/布局页面
- 可见性是继承的，因此这意味着您可以通过为子子项提供可见性来使其可见：可见；
显示：无；
- 将使元素不参与流/布局
- 可以（取决于使用的浏览器）杀死 Flash 电影和 iframe（它们会在再次显示时重新启动/重新加载），但您可以使用 iframe 防止这种情况发生
- 该元素不会占用任何空间。出于布局目的，它就像不存在一样
- 会使某些浏览器/设备（如 iPad）直接收回该元素使用的内存，如果您在动画期间在 none 和其他值之间切换会导致小问题
补充说明：
- 隐藏内容中的图像：在所有流行的浏览器中，图像仍会被加载，即使它们位于任何具有可见性的元素中：隐藏；或显示：无；
- 隐藏内容中的字体： webkit 浏览器 (Chrome/Safari) 可能会延迟加载仅用于隐藏元素的自定义字体，包括通过可见性或显示。这可能会导致您测量在加载自定义字体之前仍在使用备用字体的元素。
【讨论】：
display: none 将元素从 html 流中移除，而 visibility:hidden 不会。
【讨论】：
显示：无；将从 DOM 中移除 DOM 元素的视觉样式/物理空间，而 visibility:hidden;不会删除元素，而只是隐藏它。因此，当设置为 visibility:hidden; 时，在 DOM 中占据 300px 垂直空间的 div 仍将占据 300px 垂直宽度；但是当设置为显示时：无；它的视觉风格和它占据的空间是隐藏的，然后由于缺少更好的词而“释放”了空间。
[编辑] - 我之前写过上面的内容，我不知道是不是知识渊博，还是过得不好，但事实是，元素永远不会从 DOM 中删除等级制度。使用 display:none 时，所有块级显示“样式”都完全“隐藏”，而使用 visibility:hidden;元素本身是隐藏的，但它仍然占据 DOM 中的可视空间。我希望这可以解决问题
【讨论】：
-
不，
display: none将不会从 DOM 中删除元素。该元素仍然存在，只是没有显示。