css元素隐藏原理及display：none和visibility：hidden
⼀、CSS元素隐藏
在CSS中，让元素隐藏（指屏幕范围内⾁眼不可见）的⽅法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。⼀个⼀个看。
css横向滚动条隐藏
复制代码
代码如下:
{ 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，那么这个⼦孙元素⼜会刘谦般地显现出来。
visibility就是这样⼀个funny的属性。
对⽐总结：
display:none是个相当惨⽆⼈道的声明，⼦孙后代全部搞死（株连性），⽽且连块安葬的地⽅都不留（不留空间），导致全体民众哗然（渲染与回流）。
visibility:hidden则具有⼈道主义关怀，虽然不得已搞死⼦孙，但是⼦孙可以通过⼀定⼿段避免（伪株连性），⽽且死后全⼫，墓地俱全（占据空间），国内民众⽐较淡然（⽆渲染与回流）。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。