Html “可见性：折叠”和“显示：无”之间的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3695813/
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
Difference between "visibility:collapse" and "display:none"
提问by Veera
What is the difference between visibility:collapseand display:none?
visibility:collapse和 和有display:none什么区别？
回答by Pekka
Short version:
精简版：
The former is used to completely hide table elements. The latter is used to completely hide everything else.
前者用于完全隐藏表格元素。后者用于完全隐藏其他所有内容。
Long version:
长版：
visibility: collapsehides an element entirely (so that it doesn't occupy any space in the layout), but only when the element is a table element.
visibility: collapse完全隐藏一个元素（这样它不会在布局中占据任何空间），但仅当元素是 table element 时。
If used on elements other than table elements, visibility: collapsewill act like visibility: hidden. This makes an element invisible, but it will still occupy space in the layout.
如果用于表格元素以外的元素，visibility: collapse将像visibility: hidden. 这使得一个元素不可见，但它仍然会在布局中占据空间。
display: nonehides an element entirely, so it doesn't occupy any space in the layout, but it shouldn't be used on table elements.
display: none完全隐藏一个元素，因此它不占用布局中的任何空间，但不应在表格元素上使用它。
回答by Mathieu Renda
visibility: collapsebehaves exactly like visibility: hiddenin most formatting contexts: the space required by the element is 'reserved' in the layout, but the element itself is not rendered, leaving a blank space where it would have been.
visibility: collapsevisibility: hidden在大多数格式化上下文中的行为完全相同：元素所需的空间在布局中“保留”，但元素本身不会呈现，在本来应该存在的地方留下一个空白空间。
There are three exceptions that I know of: table-rows, table-columns and flex items, in which visibility: collapsebehaves like display: none, but with one major difference: the 'strut'. You can think of the strut as a zero-sized placeholder, that doesn't claim any space of its own in the layout process, but is nevertheless still part of the formatting structure and participates in some size computations.
我知道有三个例外：表格行、表格列和弹性项目，它们的visibility: collapse行为类似于display: none，但有一个主要区别：“支柱”。您可以将 strut 视为零大小的占位符，它在布局过程中不占用自己的任何空间，但仍然是格式化结构的一部分并参与一些大小计算。
A collapsed table-row, for example, will not occupy any vertical space in the table, but the table columns will still be dimensioned 'as-if' the collapsed row and its contents were actually visible. This is to prevent columns from 'wobbling' as rows are toggled in and out. Likewise, a collapsed flex item doesn't occupy any space along the main axis, but still contributes to the flex line cross-size.
例如，折叠的表格行不会占用表格中的任何垂直空间，但表格列的尺寸仍会“如同”折叠的行及其内容实际上是可见的一样。这是为了防止列在行切换时“摆动”。同样，折叠的 flex item 不会沿主轴占据任何空间，但仍会影响 flex line 的交叉大小。
'Do not use display: nonewith tables' is a valuable rule of thumb, but it doesn't tell the whole story.
“不要display: none与表格一起使用”是一条宝贵的经验法则，但它并不能说明全部问题。
- Use
display: noneif you don't want your hidden elements to participate in any way in the table (or flex line) layout process. - Use
visibility: collapseif you want to dynamically show and hide elements without destabilizing the table (or flex line) layout.
- 使用
display: none，如果你不想让你的隐藏要素参与表中的任何方式（或柔性线）布局的过程。 - 使用
visibility: collapse如果要动态显示并没有动摇表（或柔性线）布局隐藏元素。
Here is a code snippet demonstrating the difference between display: noneand visibility: collapsefor a table row:
下面是一个代码片段演示之间的差异display: none，并visibility: collapse为一个表行：
.show-right-border {
border-right: 1px black solid;
}<h3>visibility: collapse</h3>
<table class="show-right-border">
<tr>
<td>Short text.</td>
<td style="visibility: collapse;">Loooooooooong text.</td>
</tr>
</table>
<h3>display: none</h3>
<table class="show-right-border">
<tr>
<td>Short text.</td>
<td style="display: none;">Loooooooooong text.</td>
</tr>
</table>回答by Colin Hebert
visibility:collapseshould only be used on tables. On other elements it will act as a visibility:hidden.
visibility:collapse应该只在桌子上使用。在其他元素上，它将充当visibility:hidden.
visibility:hiddenhide the element but still take the space of the element whereas display:nonewon't even keep the space.
visibility:hidden隐藏元素但仍然占用元素的空间，而display:none甚至不会保留空间。
Resources :
资源 ：
On the same topic :
在同一主题上：
回答by zneak
visibility:collapsehas a display:nonebehavior only for table elements. On other elements, it should render as hidden.
visibility:collapsedisplay:none仅对表格元素具有行为。在其他元素上，它应该呈现为hidden.
回答by Vladyn
You can also apply visibility: collapseon an element under a flexbox container (a flex item). It will act as you're applying it on an element with display: table-rowor display: table-column
您还可以应用于visibility: collapseflexbox 容器（弹性项目）下的元素。它将作为您将其应用于具有display: table-row或display: table-column
