前言：说到元素隐藏，大部分人会想到display:none和visbility:hidden;但是实际上关于元素隐藏还分多种情况，比如是否占据空间，隐藏之后是否可以触发点击事件等情况
css元素隐藏种类
不占空间，无法点击：
1.display:none;
2.position:absolute;clip:rect(1px 1px 1px 1px);
3.position:absolute;top:-999em;
4.position:absolute;visibility:hidden;
5.height:0;overflow:hidden;
6.position:absolute;zoom:0.001;transform:scale(0);
【注： clip:rect( top right bottom left )和绝对定位元素组合用于裁剪，top right bottom left指最终剪裁可见区域的上边，右边，下边与左边，当left >= right或者top >= bottom时，表示元素全部裁掉，即隐藏】
不占空间，可以点击：
1.position:absolute;opacity:0;filter:Alpha(opacity=0);
占据空间，无法点击：
1.visibility:hidden;
2.position:relative;top:-999em;
占据空间，可以点击：
1.opacity:0;filter:Alpha(opacity=0);
display:none和visibility:hidden的区别
关于它俩的区别估计很多人刚开始和我一样只知其一，实际上一共有三个不同点：
1.空间占据；display:none不占据空间，visibility:hidden占据空间；
2.回流和渲染；display:none因为不占据空间，其设置会影响其后元素的元素，所以会产生回流和重绘，visibility:hidden就不会影响性能问题；
3.是否影响子孙节点；父节点应用display:none,其子孙节点不管如何设置都是不可见的，但是应用visibility:hidden,其子孙节点设置visibility:visible可以显现，不会受到父节点的影响。