visibility属性用于控制元素是否可见。它有两个可能的值：visible（元素可见）和hidden（元素不可见）。
当visibility属性的值为visible时，元素将在页面中显示。当其值为hidden时，元素将从页面中隐藏，但它的空间仍然会被保留，不会影响页面布局。另外，元素被隐藏后，它的子元素也会被隐藏。
下面是一些visibility属性的示例：
将元素设置为可见：
HTML代码：
<p>Hello World!</p>
CSS代码：
p {
visibility: visible;
background-color: gray;
color: white;
padding: 20px;
}
在这个例子中，我们将<p>元素的visibility属性设置为visible，这将使它在页面中可见。我们还设置了背景颜色、文字颜色和内边距，以便更好地显示元素的边界和内容。
将元素设置为不可见：
HTML代码：
<p>Hello World!</p>
CSS代码：
p {
visibility: hidden;
background-color: gray;
color: white;
padding: 20px;
}
在这个例子中，我们将<p>元素的visibility属性设置为hidden，这将使它在页面中不可见。但它的空间仍然会被保留，不会影响页面布局。我们还设置了背景颜色、文字颜色和内边距，以便更好地显示元素的边界和内容。
以下是一些常见的visibility属性的使用示例：
隐藏链接的下划线：
HTML代码：
<a href="#">My Link</a>
CSS代码：
a {
text-decoration: none;
visibility: visible;
color: blue;
border-bottom: 1px solid blue;
}a:hover {
border-bottom: none;
}
在这个例子中，我们将链接的text-decoration属性设置为none，这将删除下划线。我们将visibility属性设置为visible，这将使链接在页面中可见。然后，我们将链接的边框颜色设置为蓝色，以便突出显示链接的下划线。当鼠标悬停在链接上时，我们将边框颜色设置为none，以删除下划线。
隐藏一个元素：
HTML代码：
<div>This element will be hidden.</div>
CSS代码：
div {
visibility: hidden;
}
在这个例子中，我们将<div>元素的visibility属性设置为hidden，这将使它在页面中不可见。但它的空间仍然会被保留，不会影响页面布局。
显示一个元素：
HTML代码：
<div style="visibility: hidden;">This element will be visible.</div>
CSS代码：
div {
visibility: visible;
}
在这个例子中，我们将<div>元素的初始visibility属性设置为hidden，这将使它在页面中不可见。但是，我们可以通过CSS将其设置为visible，以使其在页面中可见。