CSS 可见性

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

控制元素的可见性

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

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

但是样式规则 visibility: collapse; 会删除内部表元素,但它不会以任何其他方式影响表的布局。通常由表格元素占据的空间将由随后的兄弟姐妹填充。

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

CSS 可见性与显示

CSS 的显示和可见性属性看起来是一样的,但它们实际上是完全不同的,并且经常使那些新的网页开发人员混淆。

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