css隐藏元素的几种方式

1. display:none
2. visibility:hidden
3. opacity:0
4. width,height,margin,padding,border:0 和 overflow:hidden 配合
5. position:absolute
6. clip-path
7. transform:scale(0) 和 zoom 配合
8. position:absolute，zoom 和 transform:scale(0) 配合

display:none（常用）

元素会彻底消失，元素本身占有的空间就会被其他元素给占有
会导致浏览器的重排和重绘
不会被子类继承

特点：元素不可见，不占据空间，无法响应点击事件

visibility:hidden（常用）

仅仅是隐藏元素，DOM还存在（相当于元素还占有空间）
不会导致浏览器的重排，但会导致重绘

特点：元素不可见，占据页面空间，无法响应点击事件

opacity:0

改变了元素的透明度，相当于隐藏了元素，但它仍会存在在页面中
不会导致浏览器的重排，在一般情况下会引发重绘
会被子类继承

若利用animation动画对opcaity作一个变化（animation会触发GPU加速），这只会触发GPU层面的composite，不会触发重绘

它自身是可以触发事件的，但是它被遮挡的子元素则不可以触发事件（而且其子元素不能设置opacity来达到显示的效果）

IE8以下的版本：filter:Alpha(opacity=0)

特点：改变了元素的透明度显示，元素不可见，占据页面空间，可以响应点击事件

width,height,margin,padding,border:0与overflow:hidden配合

把等影响盒模型的属性都设置为0，若其里面还有子元素可设置overflow:hidden来隐藏

特点：元素不可见，不占据页面空间，无法响应点击事件

position:absolute

利用top，left等属性移出可视区

特点：元素不可见，不影响页面的布局

clip-path

clip-path是一种剪裁形式
相关用法：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path

特点：元素不可见，占据页面空间，无法响应点击事件

transform:scale(0) 和 zoom 配合

通过利用scale属性来缩放元素大小，zoom设置为0.01进行隐藏

注：IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击 

特点：元素不可见，不占据页面空间，无法响应点击事件

position:absolute, zoom, transform:scale(0) 配合

通过利用scale属性来缩放元素大小，zoom设置为0.01，position:absolute 进行隐藏
这样设置相对于上面的方法都不占据空间

特点：元素不可见，不占据页面空间，无法响应点击事件

总结

隐藏后会占据页面空间：visibility，opacity
会触发响应事件：opacity
支持与trasition配合使用有渐变效果的：opacity（visibility由于只有0，1两个值，无法有渐变的效果）
支持与trasition配合使用的：opacity，visibility
子元素可以复原：visibility
被遮挡的子元素可以触发事件：visibility（前提是子元素设置了除hidden外的visibility属性）

以上的方法也可以根据情况配合使用