CSS visibility 语法
在 CSS 中，visibility 属性用于控制网页中某个元素是否可见。它可以让元素 “看不见”，但不会从页面上 “消失”，也就是说它还会占据空间。
语法：
visibility: 关键字;说明：
visibility 属性有 3 种取值，如下表所示。
| 取值 | 说明 |
|---|---|
| visible（默认值） | 元素是可见的 |
| hidden | 元素是不可见的，但它仍然占据文档流中的空间 |
| collapse | 主要用于表格行、列、列组和行组 |
当取值为 collapse 时，需要分为以下 2 种情况。
- 对于表格行、行组、列、列组，collapse 会隐藏元素，并且该空间可以被表格的其他内容使用。这可能会导致表格的其他部分的尺寸减小，从而高效地移除行或列而不会破坏表格布局。
- 对于其他元素，collapse 的行为与 hidden 相同。
对于 visibility 属性，小伙伴们还需要清楚以下几点。
- visibility: hidden; 不会响应鼠标事件（类似透明玻璃，点击穿透）。
- visibility 属性可以触发 重绘（repaint），但不会触发 回流（reflow）。
- visibility 属性不适用于完全隐藏元素的动画过渡效果。
提示:
- visibility 通常配合 JavaScript 来控制元素的显示和因此，而不会破坏页面布局。
- visibility 可以用于实现鼠标悬停显示某些内容（如下拉菜单）。
CSS visibility 摘要
| 属于 | CSS 盒子模型 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 是 |
| 默认值 | visible |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS visibility 示例
接下来，我们通过几个简单的例子来讲解一下 CSS visibility 属性是如何使用的。
示例 1：visibility 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 10px;
}
.box1 {
visibility: visible; /* 默认值，元素可见 */
background-color: lightblue;
}
.box2 {
visibility: hidden; /* 元素隐藏但占据空间 */
background-color: lightgreen;
}
.box3 {
visibility: visible; /* 元素可见 */
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="box1">可见元素1</div>
<div class="box2">隐藏元素</div>
<div class="box3">可见元素2</div>
</body>
</html>页面效果如下图所示。
分析：
在这个示例中，我们为 box1 和 box3 设置了 visibility: visible;，所以它们正常显示出来。然后为 box2 设置了 visibility: hidden;，所以它被隐藏了。
但需要注意的是，box2 原来占据的空间是仍然保留着的，因此我们可以看到可见元素 1 和可见元素 2 之间有一个空白区域。
visibility: hidden; 与 display: none; 的区别
visibility: hidden; 与 display: none; 都可以用于隐藏元素，但它们之间有着本质的区别，主要体现在以下 4 个方面。
1. 是否占据空间
display: none; 元素会被完全从文档流中移除。它不会占据任何空间，就像它从来不存在一样。display: none; 会影响其他元素的布局，其他元素会填补被移除元素留下的空白。
visibility: hidden; 元素虽然被隐藏了，但它仍然占据着原本的空间。它的盒子模型（包括宽度、高度、边距等）仍然存在于文档流中，只是内容不可见。其他元素的布局不会因为它的隐藏而改变。
2. 是否渲染
display: none; 元素不会被渲染。
visibility: hidden; 元素会被渲染，只是设置为不可见。
3. 子元素的继承
display: none; 子元素也会被隐藏，并且无法通过设置 display: block; 等属性来重新显示。
visibility: hidden; 子元素会继承 visibility: hidden; 属性而隐藏。但是子元素可以通过设置 visibility: visible; 来重新显示，即使父元素是隐藏的。
4. 事件处理
display: none; 元素完全不存在于布局中，无法接收任何事件（如点击、悬停等）。
visibility: hidden; 虽然元素不可见，但在某些情况下（特别是在旧浏览器或特定设置下），它仍然可能接收事件。不过通常为了确保兼容性，隐藏的元素不应该依赖于接收事件。子元素如果通过 visibility: visible; 恢复可见，则可以接收事件。
5. 屏幕阅读器（Accessibility）
display: none;：元素从可访问性树中移除，屏幕阅读器不会读取。
visibility: hidden;：元素也会从可访问性树中移除，屏幕阅读器不会读取（这点与 opacity: 0 不同，opacity: 0 依然会被读取）。
提示: 如果小伙伴们对 display 属性理解不深，可以查看：display 属性。
示例 2：visibility: hidden; vs display: none;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 10px;
}
.box1 {
background-color: lightcoral;
}
.box2 {
background-color: lightskyblue;
display: none;
}
.box3 {
background-color: lightseagreen;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们给 box2 设置了 display: none;，此时 box2 会完全隐藏起来。如果我们将 display: none; 改为 visibility: hidden;，此时页面效果如下图所示。
当使用 visibility: hidden; 时，虽然 box2 变成空白了，但它占据的位置依然保留了下来。
