这些隐藏元素的方法，您都知道吗？

谈到元素隐藏，最先想到的应该是display:none，其次是设置透明为0，再就是......

不知道各位是否也是这样的想法，据我所了解，CSS隐藏元素的方法大概有5种，在用法方面各有“千秋”吧，下面就介绍下：

No.1 Display

如果设置display:none确保元素不可见并且连盒模型也不生成。当然被隐藏的元素不占据任何空间。不仅如此，一旦设置display设为none任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式 产生的效果就像元素完全不存在。

.hid{display:none}

任何这个元素的子元素也会被同时隐藏。为这个属性添加过渡动画是无效的，它的任何不同状态值之间的切换总是会立即生效。

说明：通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它，就像操作其他的元素。希望能提醒大家。

No.2 Opacity

opacity 属性的意思是设置一个元素的透明度。它不是为改变元素的边界框（bounding box）而设计的。这意味着将opacity设为0只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互。

.hid{opacity:0;filter:alpha(opacity=0)}

说明：虽然opacity隐藏不能完全隐藏，但它在我们处理动画时，是很有常用的哟~~

No.3 Visibility

当我们设置visibility:hidden后，将隐藏我们的元素。如同opacity属性，被隐藏的元素依然会对我们的网页布局起作用。与opacity唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏。这个属性也能够实现动画效果，只要它的初始和结束状态不一样。这确保了visibility状态切换之间的过渡动画可以是时间平滑的

.hid{visibility:hidden}

说明：如果一个元素的visibility被设置 hidden，同时想要显示它的某个子元素，只要将那个元素的visibility显式设置为visible即可。这种方法可以用于“伪对象清除浮动”，也可以实现简单的菜单下拉效果等。先前有介绍过菜单下拉效果的应用，可以戳下这个连接：CSS下拉导航菜单制作方法

说明：虽然不支持IE6，但是IE6已经快绝种了，o(∩_∩)o 。

No.4 Position

使用position隐藏元素，无非就是在不影响布局的情况下，使用绝对定位，把元素移出我们可视区域

position:absolute;left:-999em;top:-999em

说明：这个比较简单，就不啰嗦了。

No.5 Clip-path

这种方法也是我最近才开始了解的，它是通过裁剪来实现元素的隐藏。这种方法很少用，在以前，这可以通过clip属性来实现，但是这个属性被废弃了，换成一个更好的属性叫做 clip-path。代码如下

.hid{clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px)}

如果你把鼠标悬停在第一个元素上，它依然可以影响第二个元素，尽管第二个元素已经通过clip-path隐藏了。如果你点击它，它会移除用来隐藏class，让我们的元素从那个位置显现出来。被隐藏元素中的文字仍然能够通过读屏软件读取，许多WordPress 站点使用clip-path或者之前的clip来实现专门为读屏软件提供的文字。

虽然我们的元素自身不再显示，它也依然占据本该占据的矩形大小，它周围的元素的行为就如同它可见时一样。记住用户交互例如鼠标悬停或者点击在剪裁区域 之外也不可能生效。在我们的例子里，剪裁区大小为零，这意味着用户将不能与隐藏的元素直接交互。此外，这个属性能够使用各种过渡动画来实现不同的效果。

说明：clip-path属性还没有在IE或者Edge下被完全支持，如果要在你的clip-path中使用外部的SVG文件，浏览器支持度还要更低，所以现在还常用，我们可以了解下即可了。

总结

上面5种方法，在不同情况下有着不同的用途。不过有一点要说下：上面的隐藏方法，表面是上是隐藏了，但是浏览器还是会加载渲染的。如有您有更多的方法，可以留言。