可见性属性用于指定应该对用户可见或者隐藏的元素。
它具有以下值：可见、隐藏和折叠。
当元素设置为“隐藏”时，该标签的内容变得完全透明，但它会显示它的位置。
但是，如果对隐藏元素应用了可见性：可见，则隐藏元素的后代元素是可见的。
如果visibility属性的值设置为“collapse”，就可以在Flexbox中使用。
某些浏览器不使用“折叠”值。
| 初始值 | 可见的 |
|---|---|
| 应用于 | 所有元素。 |
| 继承 | 可继承 |
| 可动画的 | 是的。 |
| 版本 | CSS2. |
| DOM 语法 | Object.Style.visibility =“崩溃”; |
CSS visibility 属性值说明
| 值 | 描述 |
|---|---|
| visible | 在这种情况下，标记是可见的。这是此属性的默认值。 |
| hidden | 此值仅在视觉上隐藏元素。 |
| collapse | 与特定表元素（行，行组，列，列组）一起使用以删除整行或者列。与其他元素一起使用时，此值与“隐藏”具有相同的含义。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
语法
visibility: visible | hidden | collapse | initial | inherit;
具有“隐藏”值的可见性属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
p {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility 属性示例.</h2>
<div>这是一些文字</div>
<p>不会在浏览器中显示的文本</p>
<div>
你看到这句话上面有空格，但实际上有一些文本，它具有隐藏值的可见性属性。
</div>
</body>
</html>
具有“visible”和“hidden”值的可见性属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.test1 {
visibility: visible;
}
.test2 {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility 属性示例</h2>
<p class="test1">生活终归还得继续。.</p>
<p class="test2">生活终归还得继续。.</p>
<p>The space above is a hidden text.</p>
</body>
</html>
具有“折叠”值的可见性属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.collapse {
visibility: collapse;
}
table {
border: 2px solid #666;
}
td {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Visibility 属性示例</h2>
<p>Here the "collapse" value is applied.</p>
<table>
<tr>
<td>10</td>
<td class="collapse">100</td>
<td>1000</td>
</tr>
<tr>
<td>20</td>
<td>200</td>
<td>2000</td>
</tr>
<tr class="collapse">
<td>30</td>
<td>300</td>
<td>3000</td>
</tr>
<tr>
<td>40</td>
<td>400</td>
<td>4000</td>
</tr>
</table>
</body>
</html>
日期：2020-06-02 22:14:51 来源：oir作者：oir