CSS是一种用于网页排版和样式的语言，可以通过设置元素的属性来实现元素的隐藏和显示。在CSS中，有几个常用的属性可以用来控制元素的可见性，包括display、visibility和opacity。
1. display属性
display属性控制元素的盒模型以何种方式显示。它有多个值可选，常用的有：
1.1 display: none;
这个值会使元素完全从文档流中移除，即不显示也不占据空间。所有子元素也会同时被隐藏。
当我们希望完全隐藏一个元素时，可以使用display: none;，它非常常用且非常有效。比如，当用户未登录时，我们希望隐藏某个包含用户信息的元素，可以在CSS中添加以下代码：
.user-info {
display: none;
}
display: none;会将.user-info这个元素及其子元素完全隐藏，同时不占据任何空间，这样其他元素会自动向上移动填补被隐藏元素的空缺。
1.2 display: block;
display属性的另一种常用值是block。它会使元素以块级元素的方式显示，即占据一行的全部宽度，并且会自动换行。
比如，我们希望将一组列表项以块级元素的形式进行显示，可以使用display: block;。在CSS中添加以下代码：
.list-item {
display: block;
}
这样，.list-item元素会以块级元素的形式显示，每个元素独占一行。
2. visibility属性
visibility属性用于控制元素的可见性，与display属性不同，它不会改变文档流的布局。它有两个常用的值可选，分别是visible（默认值）和hidden。
2.1 visibility: hidden;
这个值会使元素隐藏，但仍然占据空间。即元素不可见，但其他元素仍然按照隐藏元素所占的空间进行布局。
比如，我们希望隐藏一个元素的内容，但保留它的位置，可以使用visibility: hidden;。在CSS中添加以下代码：
.hidden-content {
visibility: hidden;
}
.hidden-content这个元素的内容将不可见，但仍然占据着相应的空间。
2.2 visibility: visible;
这个值会使元素可见，即使之前设置为hidden。当我们希望之前隐藏的元素重新显示时，可以使用visibility: visible;。
比如，我们希望在某个事件触发后显示一个隐藏的元素，可以在JavaScript中添加以下代码：
document.getElementById("hidden-element").style.visibility = "visible";
这样，id为hidden-element的元素将重新显示出来。
3. opacity属性
opacity属性用于控制元素的透明度。它的值范围从0到1，0表示完全透明，1表示完全不透明。
3.1 opacity: 0;
这个值会使元素完全透明，即不可见。同时，透明元素仍占用空间，并且其内容也是不可见的。
比如，我们希望在某个事件触发后将一个元素设置为透明，可以在JavaScript中添加以下代码：
document.getElementById("transparent-element").style.opacity = "0";
这样，id为transparent-element的元素将变为完全透明。
3.2 opacity: 1;
这个值会使元素完全不透明，即完全可见。
比如，我们希望在某个事件触发后将一个透明的元素恢复为完全可见，可以在JavaScript中添加以下代码：
document.getElementById("transparent-element").style.opacity = "1";
这样，id为transparent-element的元素将变为完全不透明，完全可见。
总结
CSS提供了多种属性可以用来实现元素的隐藏和显示。其中，display属性可以通过改变元素的显示模式来隐藏或显示元素，visibility属性可以控制元素的可见性，opacity属性可以控制元素的透明度。根据不同的需求，我们可以选择合适的属性和属性值来达到隐藏或显示元素的效果。
在实际开发中，我们可以根据具体需求选择合适的属性来实现元素的隐藏和显示。利用CSS的这些属性，可以为网页提供更好的用户体验，实现更丰富的交互效果。