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; 不常用，但在某些非常特殊的场合有需要，希望有伙伴能介绍一下。