DigitalOcean 为您旅程的每个阶段提供云产品。从 免费 200 美元信用额度 开始!
CSS 中的 visibility
属性有两个不同的功能。它隐藏表格的行和列,并且它还隐藏元素 而不改变布局。
p {
visibility: hidden;
}
tr {
visibility: collapse;
}
visibility
有四个有效的值: visible
, hidden
, collapse
, 和 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
。
如何使用媒体查询在包括 IE7 在内的所有浏览器中使图片标签中的图像响应式?
抱歉,但是…
可能是 visibility: responsive? ;P
你好,
我认为你应该在你的好文章开头澄清两件事(也许文章已经过时了)。
1 - visibility 有 6 个可能的值,而不是只有 4 个:visible, hidden, collapse, initial, inherit 和 unset。
2 - visibility 默认情况下是继承的。如果你将父元素的 visibility 设置为 hidden,那么子元素将具有 visibility: hidden,除非你显式地将子元素的 visibility 设置为 “visible”。
谢谢
如何将 visibility 属性添加到这些规则中,以便当
用户将鼠标悬停在画廊项目上时,标题会显示出来?