css隐藏元素的几种方法
在CSS中，要隐藏DOM元素常见的几种方法：
1.opacity值为0
2.visibility值为hidden
3.display值为none
4.position值为absolute，并且将其移到不可见区域
5.（在新的CSS中使用clip-path来替代clip，不常用知道就行了）
该属性很少见，该属性是通过裁剪的方法实现隐藏的。被隐藏的内容依然占据着那个位置，它周围的元素的行为就如同它可见时一样。
记住用户交互例如鼠标悬停或者点击在剪裁区域之外也不可能生效。此外，这个属性能够使用各种过渡动画来实现不同的效果。
注意：clip-path之所以没有很普及，是因为其浏览器兼容问题。在IE中是完全不支持的，所以，建议用的时候一定要加上内核前缀。
除此之外，还可以使用（不常用）：
6.设置元素的hidden
上面隐藏元素的方法都是大家常见的，也是众所周之的。
当然除此之外还有一些特殊的小技巧,比如说：
7.将元素的font-size、line-height、width和height设置为0
8.设置元素的transform的translateX或者translateY的值为-100%
常用的三种隐藏元素方法不用点：
占不占文档位置的不同：
display:none隐藏后不占据额外空间，它会产生回流和重绘。
visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。
是否子元素继承：
display:none不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了，皮之不存，毛之安附~~
visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来
opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示
事件绑定的不同：
display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；
visibility:hidden 元素上绑定的事件也无法触发；
opacity: 0 元素上面绑定的事件是可以触发的。
过渡动画的不同：
transition对于display肯定是无效的
transition对于visibility也是无效的
transition对于opacity是有效