介绍
CSS (Cascading Style Sheets) 可以控制网页的样式和布局。其中可见性属性可以用来控制元素的可见性，即元素是否在网页中显示或隐藏。在本文中，我们将重点探讨可见性属性的使用方法和实际应用场景。
可见性属性
CSS 中有三种主要的可见性属性：visibility, display, opacity。这三种属性都能够影响元素的可见性，但它们的实现方式不同，适用场景也不同。
1. visibility
visibility 控制元素的可见性，它的取值可以是 visible 或 hidden。当属性值为 visible 时，元素将在网页中可见；当属性值为 hidden 时，元素将在网页中不可见。
需要注意的是，与 display:none; 不同，visibility:hidden; 会让元素在页面保留所占空间，只是不显示。下面的代码展示了visibility 属性的使用方法。
p {
visibility: hidden;
}
该代码将使网页中所有的元素不可见，但仍将占用空间。此时如果想要让元素在网页中显示，只需要在 CSS 样式表中将其visibility属性的值设置为visible即可。
2. display
display 控制元素的布局方式，它的取值可以是 none、block、inline、inline-block 等。当属性值为 none 时，元素不仅不可见，而且不会在页面中占用空间；当属性值为 block 时，元素将强制换行，占用一整行的空间；当属性值为 inline 时，元素不会强制换行，占用与文字同样宽的空间；当属性值为 inline-block 时，元素既不会强制换行，也不会占用一整行的空间。
下面的代码展示了如何将display 属性应用到一个元素上。
p {
display: none;
}
该代码将使网页中所有的元素不可见，且不再占用空间。如果要重新显示该元素，只需要将 display 属性的值设置为block或inline即可。
3. opacity
opacity 控制元素的透明度，它的取值范围是 0 到 1。当属性值为 1 时，元素完全不透明，和visibility属性的作用是相同的；当属性值为 0 时，元素完全透明，即完全不可见；当属性值在 0 和 1 之间时，元素将显示出不同程度的透明效果。
下面的代码展示了如何使用opacity 属性将一个元素渐隐渐现。
div {
opacity: 0.5;
transition: opacity 1s;
}
div:hover {
opacity: 1;
}
该代码将使网页中的<div>元素初始状态下是半透明的，当鼠标悬停在该元素上时，会逐渐变得完全不透明。
实际应用场景
1. 点击按钮显示/隐藏元素
有时候我们需要通过点击按钮来控制某个元素的显示和隐藏。这时候就可以使用 JavaScript 来实现该功能，并配合使用display属性来改变元素的可见性。下面是一个示例代码：
#box {
display: none;
}
const btn = document.querySelector('#btn');
const box = document.querySelector('#box');
btn.addEventListener('click', function() {
if (box.style.display === 'none') {
box.style.display = 'block';
} else {
box.style.display = 'none';
}
});
该代码会在网页中添加一个按钮和一个隐藏的元素（<div id="box"<>/div>），当点击按钮时，会切换该元素的可见性。
2. 实现弹窗效果
通过使用opacity属性，我们可以实现一个弹窗效果，当需要弹出一个对话框时，可以将其透明度初始化为 0，之后慢慢增加透明度，直到完全显示弹窗。同样，当需要关闭对话框时，可以将其透明度逐渐减小，最终消失。
下面是一个弹窗效果的示例代码：
.dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
opacity: 0;
z-index: 9999;
transition: opacity 0.3s ease-in-out;
}
.mask {
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: opacity 0.3s ease-in-out;
z-index: 9998;
}
.dialog.show {
opacity: 1;
}
.mask.show {
opacity: 1;
}
const openBtn = document.querySelector('#open');
const closeBtn = document.querySelector('#close');
const dialog = document.querySelector('.dialog');
const mask = document.querySelector('.mask');
openBtn.addEventListener('click', function() {
dialog.classList.add('show');
mask.classList.add('show');
});
closeBtn.addEventListener('click', function() {
dialog.classList.remove('show');
mask.classList.remove('show');
});
该代码会在网页中添加一个开启按钮和一个关闭按钮，当点击开启按钮时，会显示一个弹窗，反之，当点击关闭按钮时，会关闭该弹窗。
总结
CSS 可见性属性是控制网页元素可见性的重要属性。visibility、display和opacity三者都可以控制元素的可见性，但各自适用于不同的场景。在实际开发中，可以通过响应用户操作来改变元素的可见性，实现不同的交互效果。