今天小编跟大家讲解下有关谈谈CSS隐藏元素(display,visibility)的区别 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关谈谈CSS隐藏元素(display,visibility)的区别 的相关资料，希望小伙伴们看了有所帮助。
复制代码代码如下:{ 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); } { position: absolute; zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); }
display:none和visibility:hidden的区别
不同有三点：
空间占据 回流与渲染 株连性第一点 想必都知道；
第二点 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声明。
来源：爱蒂网
