CSS隐藏元素的几种方式

CSS 中，隐藏一个元素，能够经过：
opacity: 0;
visibility: hidden;
display: none;
position: absolute;

为何隐藏一个元素会有那么多的技巧，并且看起来都是作同样的事情？实际上，每一个方法技巧都有着各自的不一样，正是这个差别使不一样的方法被用在不一样的特定的场景下。因此，咱们须要看清它们的差别，在适合的地方使用。

Opacity

设置元素透明度
设置透明度为 0，只是意味着虚拟化地隐藏掉这个元素。元素仍然占据它本来的位置空间，并影响着页面的布局，同时也能响应用户交互。

对于屏幕阅读器来讲，你想使用 opacity: 0; 来隐藏一个元素是不可能的。屏幕阅读器仍然会识别它的内容，就像页面上的其余元素同样；也就是说，这个元素表现出来仍是不透明的方式。

值得一提的是，使用 opacity 属性，能够创造出一些很是壮观的动画效果。

Visibility

设置可见性为 hidden，被隐藏掉元素任然会影响页面的布局。区别是：此次隐藏元素不会捕获到任何用户交互。另外，对于屏幕阅读器来讲，是不可见不可识别的。

Display

设置展现方式为 none，才是真正意义上的隐藏。
这种方法下，元素的的盒子模型再也不生效，元素不会占据页面的位置空间，也不能触发任何的用户交互效果，就好像元素不存在了同样。在任何状态下，都不能产生动画效果。

可是注意，这时候，这个元素仍然是 dom 可操做的。

Position

假设你但愿一个元素是用户可交互，可是不会影响页面布局的，一个可行的办法就是将元素移出视窗。

.hide {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

注意，避免将这个方法用在能够 focus 的元素上，以避免被 foucses 致使预料以外的 jump.
这种方法一般用在给个性化的 checkbox || radio 中。

Clip-path

能够裁切掉一个元素的某部分区域，达到隐藏的效果，不能支持IE/EDGE。
这里有一篇介绍：https://www.sitepoint.com/introducing-css-clip-path-property/
这是一个很是 cool 的属性。不过，更经常使用在动画效果中，能够实现不少Amazing的炫酷特效噢。

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

其余 其余一些比较 hack 的方法，诸如 height: 0 & font-size: 0; 不经常使用，但在某些很是特殊的场合有须要，但愿有伙伴能介绍一下。