可见性

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。从 免费 200 美元信用额度 开始!

CSS 中的 visibility 属性有两个不同的功能。它隐藏表格的行和列,并且它还隐藏元素 而不改变布局

p {
  visibility: hidden;
}
tr {
  visibility: collapse;
}

visibility 有四个有效的值: visiblehiddencollapse, 和 inherit。我们将逐一介绍它们,以了解更多信息。

可见

顾名思义, visible 使事物可见。默认情况下,没有什么是隐藏的,因此此值不会执行任何操作,除非您在此元素或其父元素上设置了 hidden 。

隐藏

hidden 值隐藏事物。这与使用 display: none 不同,因为 hidden 仅 视觉上 隐藏元素。元素仍然存在,并且仍然占用页面上的空间,但您无法再看到它(就像将不透明度设置为 0 一样)。有趣的是,此属性默认情况下不会继承。这意味着,与 display 或 opacity 属性不同,您可以使元素 hidden ,并仍然使其子元素之一为 visible ,例如:

请注意,虽然隐藏,但父元素不会触发 :hover

折叠

此值仅影响表格行(<tr>)、行组(如 <thead>)、列(<col>)、列组(<colgroup>)或通过 display 设置为该方式的元素。

与 hidden 不同,此值隐藏表格子元素,而不留下它所在的空间。如果在表格子元素以外的任何地方使用,则它类似于 visibility: hidden

此属性有很多怪癖,很难知道从哪里开始。只作为开胃菜

  • Chrome/Safari 会折叠一行,但它所占用的空间会保留。如果里面的表格单元格有边框,它将折叠成顶部边缘的单个边框。
  • Chrome/Safari 不会折叠列或列组。
  • Safari 折叠表格单元格(错误),但 Chrome 不会(正确)。
  • 在任何浏览器中,如果单元格位于已折叠的列中(无论它是否实际折叠),该单元格中的文本将不会显示。
  • Opera(WebKit 之前的版本)会折叠所有内容,除了表格单元格(这是正确的)。

还有更多,但基本上: 永远不要使用它。

继承

默认值。这仅仅会导致元素继承其父元素的值。

Flexbox

visibility: collapse; 在 Flexbox 中也有使用,定义更明确。

其他资源

浏览器支持

不考虑折叠的所有怪癖的基本知识

任何任何任何4+4+任何任何

IE 7- 不支持 collapse 或 inherit