CSS隐藏元素 display visibility opacity的区别

{ display: none; /* 不占据空间，没法点击 */ } 
{ 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); /* 不占据空间，能够点击 */ } 
{ 
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); 
/* 不占据空间，没法点击 */ 
} 

 

display:none和visibility:hidden的区别

不一样有三点：

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

第一点，想必都知道；

第二点，display:none隐藏产生reflow和repaint(回流与重绘)，而visibility:hidden没有这个影响前端性能的问题；

第三点估计是很多同行不知道的，就是“株连性”方面的差别。

所谓“株连性”，就是若是祖先元素遭遇某祸害，则其子子孙孙无一例外也要遭殃。我顿时想起了《地球反击战》或是《木乃伊之蝎子王》，一旦把母体搞跛了，小 辈啊、下属啊什么的都瞬间烟消云散。display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙 节点元素所有不可见，并且不管其子孙元素如何不屈地挣扎都无济于事。

在实际的web应用中，咱们要常常实现一些显示隐藏的功能，因为display:none自己特性以及jQuery潜在的驱动，使得咱们对display:none这种隐藏特性至关熟知。所以，长此以往会造成比较牢固的情感化认识，并没有法避免地将这种认识迁移到其余相似表现属性(eg. visibility)的认识上，再加上一些常规经验……

举例来讲吧，一般状况下，咱们给一个父元素应用visibility:hidden，则其子孙后代也都会所有不可见。因而，咱们就会有相似的认识迁移：应 用了visibility:hidden声明下的子孙元素如何不屈地挣扎都摆脱不了不可见被抹杀的命运。而实际上却存在隐藏“失效”的状况。

什么时候隐藏“失效”？很简单，若是子孙元素应用了visibility:visible，那么这个子孙元素又会刘谦般地显现出来。

对比总结：

display:none是个至关惨无人道的声明，子孙后代所有搞死（株连性），并且连块安葬的地方都不留（不留空间），致使全体民众哗然（渲染与回流）。
visibility:hidden则具备人道主义关怀，虽然不得已搞死子孙，可是子孙能够经过必定手段避免（伪株连性），并且死后全尸，墓地俱全（占据空间），国内民众比较淡然（无渲染与回流）。

height:0和overflow:hidden的组合

overflow:hidden用中文理解就是“溢出隐藏”，也就是盒子之外的内容都咔嚓掉不可见的。加上height:0，只要是通常的非inline水平元素，则元素内部全部子孙都应该是不可见的。

height:0和overflow:hidden组合隐藏“失效”的条件以下：祖先元素没有position:relative/absolute/fixed声明，同时内部子元素应用了position:absolute/fixed声明