CSS 可见性

可见性属性确定元素是可见还是隐藏。

控制元素的可见性

您可以使用 visibility 属性来控制元素是否可见。此属性可以采用下表中列出的以下值之一：

值	说明
`visible`	默认值。盒子及其内容是可见的。
`hidden`	该框及其内容是不可见的，但仍会影响页面的布局。
`collapse`	此值会导致从显示中删除整个行或列。此值用于行、行组、列和列组元素。
`inherit`	指定应从父元素继承可见性属性的值，即采用与其父元素指定的相同可见性值。

然而，样式规则 visibility: collapse; 删除了内部表格元素，但它不会以任何其他方式影响表格的布局。通常由表格元素占用的空间将由后续的兄弟元素填充。

注意：如果样式规则 visibility: collapse; 指定给其他元素而不是表格元素，它会导致与 hidden 相同的行为。

CSS 的 display 和 visibility CSS 属性看起来是一样的，但实际上它们是完全不同的，并且经常使那些刚接触 Web 开发的人感到困惑。

visibility: hidden; 隐藏元素，但它仍然占用布局中的空间。如果隐藏框的可见性设置为可见，则隐藏框的子元素将可见。
display: none; 关闭显示并从文档中完全删除元素。它不占用任何空间，即使它的 HTML 仍在源代码中。所有子元素的显示也会关闭，即使它们的显示属性设置为非无。

查看以下演示以了解显示和可见性如何影响布局。