css面试点-css隐藏元素方法大全，visibility的collapse属性值详解

display:none和visibility:hidden

• 空间占据 （display:none不占据空间，visibility:hidden仍占据空间。）
• 回流与渲染 （display:none隐藏产生reflow和repaint(回流与重绘)，而visibility:hidden没有这个影响前端性能的问题。）
• 株连性。display:none应用后子孙元素全不可见。但父元素应用visibility:hidden，而如果子孙元素应用了visibility:visible，那么这个子孙元素又会显现出来

opacity

• opacity属性的意思是设置一个元素的透明度。它不是为改变元素的边界框（bounding box）而设计的。
• 这意味着将 opacity 设为 0 只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。
• 如果在IE8以下浏览器 需要添加滤镜才能添加透明。

visibility

• visibility属性它的值设为 hidden将隐藏我们的元素。
• 如同opacity属性，被隐藏的元素依然会对我们的网页布局起作用。
• 与 opacity 唯一不同的是它不会响应任何用户交互。

/* 占据空间，无法点击 */ 
{ visibility: hidden;} 
/* 不占据空间，无法点击 */ 
{ 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);}  
/* IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击 */
{ zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0);}  
/* 不占据空间，无法点击 */ 
{ position: absolute; zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0);}

注意点：

 

• 当一个元素的 visibility 属性被设置成 collapse 值后，对于一般的元素，它的表现跟 hidden 是一样的。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟 display: none 一样，也就是说，它们占用的空间也会释放。
• 在谷歌浏览器里，使用 collapse 值和使用 hidden 值没有什么区别。
• 在火狐浏览器、Opera和IE11里，使用 collapse 值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。