css之你不知道的元素隐藏

前言：说到元素隐藏，大部分人会想到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可以显现，不会受到父节点的影响。