“可视性：崩溃”和“显示：无”之间的区别
visibility:collapse与visibility:collapse之间的区别是什么visibility:collapse和display:none ？
简洁版本：
前者用于完全隐藏表格元素。 后者是用来完全隐藏一切。
长版本 ：
visibility: collapse完全隐藏一个元素（所以它不占用布局中的任何空间），但只有当元素是一个table元素时 。
如果在表格元素以外的元素上使用， visibility: collapse会像visibility: hidden 。 这使元素不可见， 但仍然占据布局空间。
display: none 完全隐藏一个元素，所以它不占用布局中的任何空间，但不应该在表格元素上使用。
W3C参考
visibility:collapse只能用于表格。 在其他元素，它将作为一个visibility:hidden 。
visibility:hidden隐藏的元素，但仍然采取元素的空间，而display:none甚至不会保持空间。
资源：
- w3schools.com – 知名度
- w3schools.com – 显示
在同一主题上：
- visibility：hidden和display：none有什么区别？
- CSS属性：显示与可见性
- CSS display：none和visibility：hidden
- 不透明度：0与可见性完全相同：隐藏
visibility: collapse行为与visibility: hidden完全相同visibility: hidden在大多数格式化上下文中：元素所需的空间在布局中是“保留的”，但是元素本身不会被渲染，在原来的空白处留下空白。
我知道有三个例外：table-rows，table-columns和flex items，其中visibility: collapse行为类似于display: none ，但是有一个主要区别：'strut'。 您可以将支撑视为一个零大小的占位符，它不会在布局过程中声明自己的任何空间，但仍然是格式化结构的一部分，并参与一些大小的计算。
例如，折叠的表格行不会占用表格中的任何垂直空间，但是表格列的尺寸仍然会被视为折叠的行及其内容实际上可见的情况。 这是为了防止行切换进入和退出列“摆动”。 同样，折叠的弹性项目不会沿着主轴占据任何空间，但是仍然有助于弯曲线的交叉大小。
“不要使用display: none表”是一个有价值的经验法则，但它不能说明整个故事。
- 如果您不希望隐藏的元素以任何方式参与表格（或折线）布局过程，请使用
display: none。 - 使用
visibility: collapse如果你想dynamic显示和隐藏元素而不会使table（或flex line）布局不稳定。
下面是一个代码片断，演示了表格行的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>
visibility:collapse有一个display:none行为仅适用于表格元素。 在其他元素上，它应该hidden 。
