概述
CSS中隐藏元素的方法有很多，每种方式都有其适用的场景，在合适的场景下使用合适的方式，能使编程事半功倍。
1. display: none
display: none是最常用的隐藏元素的方法，它会将元素从文档流中移除，元素不占据空间。
1
2
3
| .hidden {
display: none;
}
|
1
| <div class="hidden">This is a hidden element</div>
|
2. visibility: hidden
visibility: hidden会将元素隐藏，但仍然占据空间。它适用于需要保留元素位置但不需要显示内容的场景。
1
2
3
| .hidden {
visibility: hidden;
}
|
1
| <div class="hidden">This is a hidden element</div>
|
3. opacity: 0
opacity: 0会将元素的透明度设置为0，使其不可见，但仍然占据空间。它适用于需要保留元素位置但不需要显示内容的场景。
1
2
3
| .hidden {
opacity: 0;
}
|
1
| <div class="hidden">This is a hidden element</div>
|
4. position: absolute
position: absolute会将元素从文档流中移除，并将其定位到指定位置。它适用于需要将元素隐藏在特定位置的场景。
1
2
3
4
| .hidden {
position: absolute;
left: -9999px;
}
|
1
| <div class="hidden">This is a hidden element</div>
|
5. z-index: -1
z-index: -1会将元素的层级设置为负值，使其位于其他元素的下方。它适用于需要将元素隐藏在其他元素下方的场景。
1
2
3
| .hidden {
z-index: -1;
}
|
1
| <div class="hidden">This is a hidden element</div>
|
6. clip-path
clip-path可以将元素裁剪到一个特定的区域，使其不可见。它适用于需要将元素隐藏在特定区域的场景。
1
2
3
| .hidden {
clip-path: inset(50%);
}
|
1
| <div class="hidden">This is a hidden element</div>
|
transform: scale(0)会将元素缩放到0，使其不可见。它适用于需要将元素隐藏在特定区域的场景。
1
2
3
| .hidden {
transform: scale(0);
}
|
1
| <div class="hidden">This is a hidden element</div>
|
8. height: 0
height: 0会将元素的高度设置为0，使其不可见。它适用于需要将元素隐藏在特定区域的场景。
1
| <div class="hidden">This is a hidden element</div>
|
9. width: 0
width: 0会将元素的宽度设置为0，使其不可见。它适用于需要将元素隐藏在特定区域的场景。
1
| <div class="hidden">This is a hidden element</div>
|
10. margin: -9999px
margin: -9999px会将元素的外边距设置为负值，使其不可见。它适用于需要将元素隐藏在特定区域的场景。
1
2
3
| .hidden {
margin: -9999px;
}
|
1
| <div class="hidden">This is a hidden element</div>
|