CSS中很多隐藏元素的方法，但这些方法的可访问性、布局、动画、性能和事件处理的方式有所不同。

• 动画： 一些CSS隐藏元素的方法一般是全有或者全无，元素要么是完全可见，要么是完全不可见，并且没有中间状态。其他的，比如透明度，可以是一个范围的值，所以在这中间过程插入动画成为可能；
• 可访问性： 下面的每一种方法都会在视觉上隐藏一个元素，但不一样会真正的去除DOM元素。有一些方式隐藏元素后，屏幕阅读器仍然能读取到元素内容；
• 事件处理： 隐藏元素之后，有些方式元素上的事件仍然能被触发，而有些方式就会导致元素上的事件触发无效；
• 表现： 浏览器加载并解析 HTML DOM 和 CSS 对象模型后，页面将分三个阶段呈现：布局（生成每个元素的几何位置）、绘制（绘制每个元素的像素）、组合（以适当的顺序放置元素层）。仅导致构图变化的效果明显比影响布局的效果更好。在某些情况下，浏览器还可以使用硬件加速。

下面就来看看CSS中隐藏元素的方式，以及每种方式的优缺点。

1. opacity 和 filter: opacity()

opacity: N 和 filter: opacity(N) 属性可以传递一个 0 到 1 之间的数字，或者 0% 和 100% 之间的百分比，对应地表示完全透明和完全不透明。

• opacity: N：该属性用来设置元素的透明度；
• filter: opacity(N) ：filter属性用来设置元素的滤镜，opacity是滤镜重的透明度，用来设置元素的透明度。

div {
    opacity: 0;
}

div {
    filter: opacity(0%);
}
复制代码

在现代浏览器中，这两者之间几乎没有实际的区别，但如果同时应用多种效果（模糊、对比度、灰度等）时，应该使用 filter 属性。

注意：opacity 可以设置动画并提供出色的性能，但页面上保留完全透明的元素可能会触发事件。

2. color alpha 透明度

可以将元素的color、background-color 和 border-color 等属性设置为rgba(0,0,0,0)，这样就会使元素完全透明：

div {
	color: rgba(0,0,0,0);
  background-color: rgba(0,0,0,0);
}
复制代码

这三个属性都是支持设置动画效果的，需要注意，透明度不能应用于带有背景图片的元素，除非它们是使用 linear-gradient 或类似方法生成的。

Alpha 通道可以设置为：

• transparent：完全透明（中间不能插入动画）；
• rgba(r, g, b, a)：红色、绿色、蓝色和 alpha；
• hsla(h, s, l, a)：色相、饱和度、亮度和 alpha；
• #RRGGBBAA 或 #RGBA。
• 
  

3. transform

transform 属性可以用于元素的平移、缩放、旋转或倾斜等。可以使用 scale(0) 或者 translate(-9999px, 0px) 属性值来将元素隐藏：

div {
	transform: scale(0);
}

div {
	translate(-9999px, 0px)
}
复制代码

transform 属性提供了出色的性能和硬件加速，因为元素被有效地移动到了单独的层中，并且可以在 2D 或 3D 中进行动画处理。原始的布局空间会保持原样，并不会受影响。使用这种方式隐藏的元素不会触发任何事件。

4. clip-path

clip-path 属性可以创建一个剪辑区域，用于确定元素的哪些部分是可见的。使用 clip-path: circle(0) 可以将元素进行隐藏。

div {
	clip-path: circle(0);
}
复制代码

clip-path为添加动画效果提供了空间，不过它只能在现代浏览器中使用。

5. visibility: hidden

visibility 属性可以设置为 visible 或 hidden 来显示和隐藏元素。

div {
	visibility: hidden;
}
复制代码

除非使用collapse值，否则元素使用的空间保持不变。

6. display: none

display 可能是最常用的元素隐藏方法; 。当其值为 none 时元素就隐藏了。被隐藏的元素不会在页面中占据位置，也不会响应绑定的监听事件。

div {
  display: none;
}
复制代码

然而，在大多数情况下，display 可能是最糟糕的 CSS 属性。除非使用 position:absolute 将元素移出文档流，或者采用contain属性，否则它的隐藏过程无法设置动画，并将触发页面重新布局。

7. z-index

可以通过将元素的 z-index 属性设置为负值，以实现元素的隐藏。这实际上就是将元素放在了我们看不到的层。

div {
  z-index: -1;
}
复制代码

8. position

position属性允许使用top、bottom、left、right 从页面中的默认位置移动元素。因此，绝对定位的元素可以通过左键：-9999px 等值移出屏幕：

div {
  position: absolute;
  left: -999px;
}
复制代码

9. 覆盖另一个元素

通过在元素的上面放置与背景颜色相同的元素，可以在视觉上隐藏一个元素。下面来使用::after伪元素来实现：

div::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
}
复制代码

虽然这从技术上讲是可以实现的，但是这样做需要更多的代码。

10. 缩小尺寸

可以通过使用width、height、padding、border-width 或 font-size 来缩小元素的尺寸以实现元素的隐藏。可能还需要应用 overflow: hidden; 来确保内容不会溢出。

div {
  height: 0;
  padding: 0;
  overflow: hidden;
}
复制代码

使用这种形式我们可以在隐藏过程中使用动画效果，并且他的性能会比 transform 好很多。

分类：

个视频来说一个有时候前端面试会问到的CSS的面试题，就是让元素隐藏的这几种方式，它们具体的用法和区别。具体去用我相信大家都用过，但是要把这个题回答的很好，把它们之间的区别捋清，不妨来说一下。

这里写了两个div，一个红色、一个蓝色，现在把红色这个给它隐藏掉，上面写的3种方法都可以把它隐藏掉。区别在哪里？

·先来试一下opacity，红色的div确实不见了。

·再来试一下第二种visibility，刷新一下，红色的div也是看不见了，好像和第一种方法没什么区别。

·最后来试一下display，这种方法，红色的div不单止不见了，连蓝色的div它的位置也发生改变了。

先来说一下前面两种，因为前面两种方式，它们表现出来的形式实在太像了。现在用的是opacity，其实是改变了元素的透明度，也就是让它完全透明了，所以才看不到它。但实际上它还是存在的，还是在这里的，只是看不到而已。所以这个方式，它是需要对元素所占的空间的给它排列出来，也就是它还是占的这个空间的。

其次不光是把它所占的空间排列出来，浏览器还需要对元素进行渲染，只不过是把它渲染成透明的，它还是存在的，所以是可以对它进行交互操作的，这一点等一下可以通过js去证明。

接着就是把visibility设置成hidden，这一个的排列方式和刚才设置透明度的是一样的，但是它们有什么区别？这个看得出来，还是需要对它所占的空间进行排列的，它还是占着那个位置的，但是它也仅仅是占着那个空间而已。浏览器已经不对元素进行渲染了，所以空间给你保留，但是元素不存在，就没办法进行交互了。

最后就是display为none，很明显蓝色的div它的位置已经改变了，它占据了原本红色div的位置，也就是红色div原本的那个位置空间已经没有了。其实这种方式，已经不是单纯的把元素给隐藏了，已经是把元素的核模型给修改了，直接就把这个元素给干没了，所以它是既不排列也不渲染。

如果是作为一个面试题来回答，最好还回答到一点，在这三个里面来比较，opacity透明度的这种方式它是最消耗性能的，因为不单止要帮你把位置空出来，还要完完全全的把你给渲染出来，只不过是渲染成透明的，所以它是这三个里面最消耗性能的。

visibility它就是没那么消耗性能，因为这个只是给它保留个位置，保留个空间就可以了，不用对它进行渲染，所以它就没那么消耗性能，display的方式就是完全不消耗性能了。

最后再来看一下用opacity这个元素是不是真的还存在，还可以交互，然后用visibility就已经不可以交互了，这里再把它改成opacity，来写一下js，这里很简单，就给它添加一个点击事件，因为这个元素它还存在，肯定就可以点得到它。

把鼠标移到这个位置，看一下这个元素还存不存在，还可不可以点击得到它，点击一下，发现没有，可以弹出这个OK，证明这个元素它还是存在的，只不过看不到它而已。再把前面给它改一下，改成visibility的方式，再来点这个位置，现在无论我怎么点它都没有反应了，因为这个元素它压根就不存在了，只是空着这个位置在这里而已。

这个视频就到这里，感谢大家的收看。