CSS元素隐藏的display和visibility

一、CSS元素隐藏

在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。

{ display: none; /* 不占据空间，无法点击 */ }


{ visibility: hidden; /* 占据空间，无法点击 */ }


{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间，无法点击 */ }


{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }


{ position: relative; top: -999em; /* 占据空间，无法点击 */ }


{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ }


{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }


{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }


{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ }



{ 
    zoom: 0.001;
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    /* IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击 */
}



{
    position: absolute;
    zoom: 0.001;
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0); 
    /* 不占据空间，无法点击 */
}

　　

欢迎补充！

以上隐藏方法如果针对最小辈的子元素（膝下无子女），例如<img>图片元素，则上面的注释说明都是OK的(若有误，请指正)。

 

二、display:none和visibility:hidden

　　display:none和visibility:hidden的区别在哪儿？

　　目前，我所知道的不同有三点（欢迎补充）：

1. 空间占据
2. 回流与渲染
3. 株连性

　　第一点，想必都知道；第二点，display:none隐藏产生reflow和repaint(回流与重绘)，而visibility:hidden没有这个影响前端性能的问题；第三点估计是不少同行不知道的，就是“株连性”方面的差异。

　　何为株连性？

　　所谓“株连性”，就是如果祖先元素遭遇某祸害，则其子子孙孙无一例外也要遭殃。display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事。

　　一般情况下，大家都会用display:none;来隐藏某个需要隐藏的属性，而且乐此不疲，偶尔时候会应用visibility:hidden来隐藏元素以便为其下子元素保留位置，但是应用其会出现隐藏失效的情况。何时隐藏“失效”？很简单，如果子孙元素应用了visibility:visible，那么这个子孙元素又会显现出来。visibility就是这样一个funny的属性。

对比总结：
`　　display:none是个相当惨无人道的声明，子孙后代全部搞死（株连性），而且连块安葬的地方都不留（不留空间），导致全体民众哗然（渲染与回流）。
　　visibility:hidden则具有人道主义关怀，虽然不得已搞死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），国内民众比较淡然（无渲染与回流）。

【转】http://www.zhangxinxu.com/wordpress/?p=2191

　　可以去上面的连接查看更多关于元素隐藏的妙用.