CSS visibility(可见性)属性允许您在不更改文档布局的情况下显示或隐藏元素，而隐藏元素会占用空间。
visibility 属性可用于创建各种效果，例如隐藏尚未准备好显示的元素，或隐藏仅与特定用户相关的元素。
可能的值- visible -元素是可见的。
- hidden -该元素是隐藏的，但它仍然占用页面上的空间。
- collapse −从表中删除表的行、列、列组和行组。如果对非表元素使用 Collapse，则它与 Hidden 具有相同的含义。
- initial -将元素的 visibility 设置为其默认值。
- inherit -从其父元素继承 visibility 属性。
适用于
所有 HTML 元素。
DOM 语法
visibility: visible | hidden | collapse | initial | inherit;
CSS visibility - 可见值
CSS 可见性：visible 属性使元素可见。这是 visibility 属性的默认值。
<html>
<head>
<style>
h2 {
visibility: visible;
}
</style>
</head>
<body>
<h2>Tutorialspoint CSS visibility</h2>
</body>
</html>
CSS visibility - 隐藏值
“ visibility ：hidden”属性在用户的视图中隐藏元素，但不会将其从文档布局中删除。
屏幕阅读器仍然可以访问该元素，并且会影响页面的布局，即使它不可见也是如此。
<html>
<head>
<style>
h2 {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Tutorialspoint CSS visibility hidden</h2>
<p>The hidden heading is still visible to screen readers and takes up space in the page.</p>
</body>
</html>
CSS visibility - 折叠值
若要在不影响表布局的情况下删除表行或列，可以将行或列的 visibility 属性设置为折叠。此值仅对表元素有效。
<html>
<head>
<style>
.collapse {
visibility: collapse;
}
table {
border-collapse: collapse;
color: #ffffff;
width: 100%;
background-color: #35DC5A;
border: 2px solid black;
}
th,
td {
border: 2px solid black;
padding: 8px;
text-align: left;
font-size: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<td>visible</td>
<td>hidden</td>
<td class="collapse">collapse</td>
</tr>
<tr>
<td>initial</td>
<td>inherit</td>
<td>revert</td>
</tr>
</table>
</body>
</html>
CSS visibility - 在非表元素上折叠
以下示例演示了当在非表元素上设置 visibility：collapse 时，此处我们看到属性的行为与 visibility：hidden 相同：
<html>
<head>
<style>
.collapse {
visibility: collapse;
}
</style>
</head>
<body>
<h2>Collapse on nontable elements</h2>
<p class="collapse">you cant see me</p>
<p>the above sentence is hidden</p>
</body>
</html>
CSS visibility - 过渡效果
以下示例演示了将鼠标悬停在图像上时如何隐藏元素：
<html>
<head>
<style>
.collapse {
visibility: collapse;
}
img:hover + .hidable {
visibility: hidden;
}
</style>
</head>
<body>
<img src="images/tutimg.png" style="cursor:pointer;" />
<h2 class="hidable">Hovering over the above image hides me!</h2>
</body>
</html>
