css隐藏元素的10个方法「这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战」 css有很多不

「这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战」

css有很多不同的方法来隐藏一个元素，但是这些方法对布局、动画、事件绑定都有不同的影响。

1.`opacity` 和 `filter: opacity()`

opacity: N 和 filter: opacity(N) ，属性可以传递一个 0 到 1 之间的数字，或者 0% 到 100% 之间的百分比，相应地表示完全透明和完全不透明。在现代浏览器上，两者的表现几乎没什么区别，但如果同时应用多种效果（模糊、对比度、灰度等），则应使用filter。

.hide:hover .hide-item,
.hide:focus .hide-item {
  opacity: 0;
/*
  也可以写成:
  opacity: 0%;
  filter: opacity(0%);
*/
}

Opacity 可以设置动画并有出色的性能，但要注意页面上会保留完全透明的元素并可以绑定事件。

2.颜色 Alpha 透明度

opacity影响整个元素，我们也可以单独对color, background-color和border-color进行设置。使用 rgba(0,0,0,0) 或类似方法使元素完全透明：

.hide:hover .hide-item,
.hide:focus .hide-item {
  color: rgba(0,0,0,0);
  background-color: rgba(0,0,0,0);
}

上面的每个属性都可以单独设置动画以创建有趣的效果，这种隐藏元素的方式也能触发事件。

3.transform

transform属性可用于移动、缩放、旋转或倾斜元素。scale(0)或translate(-999px, 0px) 将隐藏元素：

.hide:hover .hide-item,
.hide:focus .hide-item {
  transform: scale(0);
/*
  也可以写成:
  transform: translate(-999px, 0);
*/
}

transform有出色的性能，因为元素被移动到一个单独的层中，可以在2D或3D中进行动画处理。虽然原始布局空间依然保留位置，但不能触发任何事件。

4.`clip-path`

clip-path属性创建一个裁剪区域，用于指定元素的哪些部分是可见的。使用clip-path: circle(0); 将完全隐藏元素。

.hide:hover .hide-item,
.hide:focus .hide-item {
  clip-path: circle(0);
}

clip-path为制作有趣的动画提供了灵感，不过它只能有用于现代浏览器中。这种方式隐藏的元素无法触发事件。

5.visibility

可见性属性可以设置为visible或hidden以显示和隐藏元素：

.hide:hover .hide-item,
.hide:focus .hide-item {
  visibility: hidden;
}

被隐藏的元素依然保持原来的位置，但是这种隐藏元素的方式也是无法绑定事件的，如果使用visibility:collapse,则元素将不占有原来的位置。

6.display

display可能是最常用的元素隐藏方法。 none有效地删除元素，就好像它从未存在于DOM中一样。然而，在大多数情况下，这不是一个好的方法，它无法实现动画效果也引起回流(重布局)。

.hide:hover .hide-item,
.hide:focus .hide-item {
  display: none;
}

7.HTML hidden 属性

HTML hidden 属性可以添加到任何元素：

<p hidden>
  Hidden content
</p>

这与 display:none 具有相同的优点和缺点，在使用不允许样式更改的cms系统时它可能比较有用。

8.绝对定位

position:absolute属性可以将元素从页面布局内的默认位置朝上下左右方向移动。因此，绝对定位的元素可以用left: -999px或类似的方法移出屏幕：

.hide:hover .hide-item,
.hide:focus .hide-item {
  position: absolute;
  left: -999px;
}

9.元素覆盖

通过将另一个与背景颜色相同元素放置本元素在的顶部，可以在视觉上隐藏一个元素。在下面例子中，一个::after伪元素覆盖在本元素上面：

.hide-item {
  position: relative;
}

.hide-item::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
}

.hide:hover .hide-item::after,
.hide:focus .hide-item::after {
  bottom: 0;
}

虽然技术上可行，但此选项需要比其他方法更多的代码。该方法隐藏的元素也可以绑定事件。

10.缩小尺寸

可以通过使用宽度、高度、填充、边框宽度字体大小最小化其尺寸来隐藏元素。

.hide:hover .hide-item,
.hide:focus .hide-item {
  height: 0;
  padding: 0;
  overflow: hidden;
}

该方式可以实现有趣的动画效果，但transform的性能明显更好。

总结

display: none 多年来一直是隐藏元素的首选解决方案，但在考虑性能时，transform 或 opacity 是更好的选择。

作者：Craig Buckler 译者：前端很美来源：sitepoint

css隐藏元素的10个方法

1.opacity 和 filter: opacity()