在 CSS 中，有许多方法可以隐藏元素。这些方法可以用于各种目的，例如临时隐藏元素、在某些情况下显示或隐藏元素，或者根据用户交互来隐藏或显示元素。在这篇博客中，我将介绍 10 种不同的 CSS 隐藏元素的方法，并提供代码示例，以便更好地理解每种方法的工作原理。
1. display:none
特点：隐藏、不占位
display:none是最基本和常用的方法来隐藏一个元素。它将完全从页面布局中移除该元素，并且该元素不会占用任何空间。下面是一个使用display:none来隐藏元素的示例：
.hidden {
display: none;
}
<meta charset="utf-8">
<div class="hidden">这是一个隐藏的元素。</div>
在上面的示例中，我们创建了一个名为 .hidden 的 CSS 类，并将其应用于一个 <div> 元素上。这将隐藏该 <div> 元素，使其在页面上不可见。
2、visibility:hidden
特点：隐藏、占位
visibility:hidden 与 display:none 类似，但它不会从页面布局中完全移除元素。相反，它只是使元素不可见，但仍然会占用其原始空间。下面是一个使用 visibility:hidden 来隐藏元素的示例：
.hidden {
visibility: hidden;
}
<meta charset="utf-8">
<div class="hidden">这是一个隐藏的元素。</div>
与 display:none 类似，我们创建了一个名为 .hidden 的 CSS 类，并将其应用于一个 <div> 元素上。这将使该 <div>元素不可见，但它仍然会占用其原始空间。
3. opacity:0
特点：隐藏、占位
opacity:0 会将元素的透明度设置为 0，使其完全透明。这与 visibility:hidden 类似，因为元素仍然会占用其原始空间，但它将变得完全不可见。下面是一个使用 opacity:0 来隐藏元素的示例：
.hidden {
opacity: 0;
}
<meta charset="utf-8">
<div class="hidden">这是一个隐藏的元素。</div>
在上面的示例中，我们创建了一个名为.hidden的 CSS 类，并将其应用于一个 <div> 元素上。这将使该 <div> 元素完全透明，使其在页面上不可见。
4、position:fixed 和 top:0、left:0、bottom:0、right:0
特点：隐藏、占位
position:fixed 将元素定位到固定位置，而 top:0、left:0、bottom:0 和 right:0 将其定位到页面的四个边缘。这将使元素从页面布局中移除，但它仍然会占用其原始空间。下面是一个使用 position:fixed 和 top:0、left:0、bottom:0、right:0 来隐藏元素的示例：
.hidden {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<meta charset="utf-8">
<div class="hidden">这是一个隐藏的元素。</div>
在上面的示例中，我们创建了一个名为 .hidden 的 CSS 类，并将其应用于一个 <div> 元素上。这将使该 <div> 元素从页面布局中移除，并定位到页面的左上角。
5. z-index:-1
z-index 用于设置元素的堆叠顺序。z-index:-1 将元素置于堆叠顺序的最底层，使其被其他元素遮盖。下面是一个使用 z-index:-1 来隐藏元素的示例：
.hidden {
position: absolute/relative/fixed;
z-index: -1;
}
<meta charset="utf-8">
<div class="hidden">这是一个隐藏的元素。</div>
在上面的示例中，我们创建了一个名为 .hidden 的 CSS 类，并将其应用于一个 <div> 元素上。这将使该 <div> 元素被其他元素遮盖，使其在页面上不可见，是否占位要以position的属性为准。
6. clip-path
特点：隐藏、占位
clip-path 允许你通过定义一个形状来剪裁元素的内容。你可以使用各种形状，如矩形、圆形、多边形等。通过将 clip-path 属性设置为一个形状的 CSS 路径，你可以隐藏元素的一部分或全部。下面是一个使用 clip-path 来隐藏元素的示例：
.hidden {
clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%);
}
<meta charset="utf-8">
<div class="hidden">这是一个隐藏的元素。</div>
在上面的示例中，我们创建了一个名为 .hidden 的 CSS 类，并将其应用于一个 <div> 元素上。这将隐藏该 <div> 元素的下半部分，使其在页面上不可见。
7. transform:scale(0)
特点：隐藏、占位
transform:scale(0) 将元素的缩放比例设置为 0，使其完全不可见。这与 opacity:0 类似，因为元素仍然会占用其原始空间，但它将变得完全不可见。下面是一个使用 transform:scale(0) 来隐藏元素的示例：
.hidden {
transform: scale(0);
}
<meta charset="utf-8">
<div class="hidden">这是一个隐藏的元素。</div>
在上面的示例中，我们创建了一个名为 .hidden 的 CSS 类，并将其应用于一个 <div> 元素上。这将使该 <div> 元素完全不可见，使其在页面上不可见。
8. transform:translate(0, 100%)
特点：隐藏、占位
transform:translate(0, 100%) 将元素向下移动 100%，使其超出页面的可见区域。这与 position:fixed 和 top:0、left:0、bottom:0、right:0类似，因为元素仍然会占用其原始空间，但它将变得完全不可见。下面是一个使用 transform:translate(0, 100%) 来隐藏元素的示例：
.hidden {
transform: translate(0, 100%);
}
<meta charset="utf-8">
<div class="hidden">这是一个隐藏的元素。</div>
在上面的示例中，我们创建了一个名为 .hidden 的 CSS 类，并将其应用于一个 <div> 元素上。这将使该 <div> 元素向下移动 100%，使其超出页面的可见区域，使其在页面上不可见。
9. 尺寸设置为0
特点：隐藏、不占位
可以通过使用最小化其尺寸被隐藏width，height，padding，border-width和/或font-size。还需多设置一个overflow: hidden;以确保内容不会溢出。
.hidden {
width: 0;
height: 0;
border: 0;
padding: 0;
overflow: hidden;
margin: 0;
}
<meta charset="utf-8">
<div class="hidden">这是一个隐藏的元素。</div>
在上面的示例中，我们创建了一个名为 .hidden 的 CSS 类，并将其应用于一个 <div> 元素上。这将隐藏该 <div> 元素，使其在页面上不可见且无法与用户进行交互。
10、hidden属性
特点：隐藏、不占位
<div hidden>123</div>
设置hidden属性，会应用浏览器默认样式[hidden] {display: none;}，所以注意不要和display属性同时使用。
评论区