CSS 属性：显示与可见性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3475119/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Properties: Display vs. Visibility
提问by Sachin R
What is difference between Display vs. Visibility properties?
Display 与 Visibility 属性之间有什么区别？
回答by BoltClock
The visibilityproperty only tells the browser whether to show an element or not. It's either visible (visible- you can see it), or invisible (hidden- you can't see it).
该visibility属性仅告诉浏览器是否显示元素。它要么是可见的（visible- 你可以看到它），要么是不可见的（hidden- 你看不到它）。
The displayproperty tells the browser howto draw and show an element, if at all - whether it should be displayed as an inlineelement (i.e. it flows with text and other inline elements) or a block-level element (i.e. it has height and width properties that you can set, it's floatable, etc), or an inline-block(i.e. it acts like a block box but is laid inline instead) and some others (list-item, table, table-row, table-cell, flex, etc).
该display属性告诉浏览器如何绘制和显示元素，如果有的话 - 它应该显示为一个inline元素（即它与文本和其他内联元素一起流动）还是一个block-level 元素（即它具有高度和宽度属性）你可以设置，它是可浮动的，等等），或者一个inline-block（即它就像一个块盒，但被内联放置）和其他一些（list-item, table, table-row, table-cell, flex, 等等）。
When you set an element to display: blockbut alsoset visibility: hidden, the browser still treats it as a block element, except you just don't see it. Kind of like how you stack a red box on top of an invisible box: the red box looks like it's floating in mid-air when in reality it's sitting on top of a physical box that you can't see.
当您将元素设置为display: block但也设置为 时visibility: hidden，浏览器仍将其视为块元素，只是您看不到它。有点像你把一个红色盒子叠在一个看不见的盒子上面：红色盒子看起来像是漂浮在半空中，而实际上它坐在一个你看不到的物理盒子的顶部。
In other words, this means elements with displaythat isn't nonewill still affect the flow of elements in a page, regardless of whether they are visible or not. Boxes surrounding an element with display: nonewill behave as if that element was never there (although it remains in the DOM).
换句话说，这意味着带有displaynotnone的元素仍然会影响页面中元素的流动，无论它们是否可见。围绕一个元素的框display: none将表现得好像该元素从不存在（尽管它仍然在 DOM 中）。
回答by Spellcoder
visibility: hidden;
可见性：隐藏；
- the element won't be painted AND don't recieve click/touch events, but the space it takes is still occupied
- because it's still there for layout purposes, you can measure it without it being visible
- changing content will still cost time reflow/layouting the page
- visibility is inherited, so this means you can make subchildren visible by giving them visibility: visible;
- 元素不会被绘制，也不会收到点击/触摸事件，但它所占用的空间仍然被占用
- 因为它仍然用于布局目的，您可以在不可见的情况下对其进行测量
- 更改内容仍会花费时间重排/布局页面
- 可见性是继承的，因此这意味着您可以通过赋予子子可见性来使它们可见：可见；
display: none;
显示：无；
- will make the element not participate in the flow/layout
- can (depending on the used browser) kill Flash movies and iframes (which will restart/reload upon showing again), although you can prevent this from happening with iframes
- the element won't take up any space. for layout purposes it's like it does not exist
- will make some browsers/devices (like the iPad) directly take back memory used by that element, causing small hickups if you switch between none and an other value during animations
- 将使元素不参与流/布局
- 可以（取决于使用的浏览器）杀死 Flash 电影和 iframe（它们将在再次显示时重新启动/重新加载），尽管您可以使用 iframe 防止这种情况发生
- 该元素不会占用任何空间。出于布局目的，它就像不存在一样
- 将使某些浏览器/设备（如 iPad）直接收回该元素使用的内存，如果您在动画期间在 none 和其他值之间切换，则会导致小故障
extra notes:
额外说明：
- images in hidden content:in all popular browsers images are still loaded, even though they are within any element with visibility: hidden; or display: none;
- fonts in hidden content:webkit browsers (Chrome/Safari) may delay loading custom fonts which is only used in hidden elements, including through visibility or display. This may cause you to measure elements which are still using a fallback font until the custom font is loaded.
- 隐藏内容中的图像：在所有流行的浏览器中，图像仍会加载，即使它们位于任何具有可见性的元素中：隐藏；或显示：无；
- 隐藏内容中的字体：webkit 浏览器（Chrome/Safari）可能会延迟加载仅用于隐藏元素的自定义字体，包括通过可见性或显示。这可能会导致您测量在加载自定义字体之前仍在使用后备字体的元素。
回答by matpol
display: none removes the element out of the flow of the html whereas visibility:hidden does not.
display: none 将元素从 html 流中移除，而visibility:hidden 则不会。
回答by SimonDowdles
display:none; will remove the DOM elements visual style / physical space from the DOM, whereas visibility:hidden; will not remove the element, but simply hide it. So a div occupying 300px of vertical space in your DOM will STILL occupy 300px of vertical width when set to visibility:hidden; but when set to display:none; it's visual styles and the space it occupies are hidden and the space is then "freed" up for lack of a better word.
显示：无；将从 DOM 中删除 DOM 元素的视觉样式/物理空间，而可见性：隐藏；不会删除元素，而只是隐藏它。因此，当设置为visibility:hidden 时，DOM 中占据 300 像素垂直空间的 div 仍将占据 300 像素的垂直宽度；但是当设置为 display:none; 它的视觉风格和它占据的空间被隐藏，然后由于缺乏更好的词而“释放”空间。
[EDIT] - It was a while back that I wrote the above, and whether I was not knowledgeable enough or having a bad day, I don't know, but the reality is, the element is NEVER removed from the DOM hierarchy. All block level display 'styles' are completely 'hidden' when using display:none, whereas with visibility:hidden; the element itself is hidden but it still occupies a visual space in the DOM. I hope this clears things up
[编辑] - 不久前我写了上面的内容，我不知道是我知识不够还是今天过得很糟糕，但事实是，该元素永远不会从 DOM 层次结构中删除。使用 display:none 时，所有块级显示“样式”都完全“隐藏”，而使用可见性：隐藏；元素本身是隐藏的，但它仍然占据 DOM 中的视觉空间。我希望这能解决问题
