📅 最后修改于: 2023-12-03 14:40:17.741000 🧑 作者: Mango
CSS Visibility 属性用于控制元素是否可见。
visibility: visible|hidden|collapse|initial|inherit;
visible：元素可见。hidden：元素不可见，但仍占用空间。collapse：用于表格元素，将表格行或列折叠起来，实际上是将它们从渲染中删除，直到需要显示它们。initial：设置为默认值。即 visible。inherit：从父元素继承 visibility 属性的值。以下示例展示了如何使用 CSS Visibility 属性隐藏一个元素。
<!DOCTYPE html>
<html>
<head>
<title>CSS Visibility Property</title>
<style>
.hide {
visibility: hidden;
}
</style>
</head>
<body>
<h2>隐藏元素</h2>
<p>这是一个带有隐藏类的段落。</p>
<p class="hide">这是一个被隐藏的段落。</p>
</body>
</html>
在这个例子中，我们使用 .hide 类将第二个段落元素隐藏。因此，第二个段落虽然不可见，但仍占用空间。
display 属性不同，使用 visibility 属性隐藏的元素仍然保留了它们所占用的空间，而不是不显示它们。visibility 属性不会删除元素，而是隐藏它们。因此，当你在使用 visibility 属性时，确保同时使用其他属性如 display 来控制元素的大小和位置。