lizhenqiu blog

正文 3075字数 44,080阅读

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

欢迎补充！
以上隐藏方法如果针对最小辈的子元素（膝下无子女），例如<img>图片元素，则上面的注释说明都是OK的(若有误，请指正)。
我以前就提过，为了便于理解，我们会使用情感化思维，类比现实，在内心形成只属于自己的具象化的想法。这是很OK的，但是，要知道，事物是具有两面的，具象的东西容易让我们陷入固定思维模式，尤其在现实世界中非特殊情境的验证下，从而让我们不经意间产生一些错误的认识。
上面的话有点像老油条——难嚼。要让老少皆懂，很简单，举几个简单的示例就可以了。而这里的示例就是上头几个隐藏的例子：由于具象化的固定思维，您可能并不知道下面要提到的几种CSS元素隐藏“失效”的情况！
二、display:none和visibility:hidden
我记得校园招聘那会儿，技术面的时候有问我display:none和visibility:hidden的区别在哪儿？
“这个问题简单？”我心里头暗自得意，按耐住自己得意又紧张的小心脏，自信满满地说，“这两个声明都可以让元素隐藏，不同之处在于display:none隐藏后的元素不占据任何空间，而visibility:hidden隐藏的元素空间依旧存在。”
想在想想，自己实在是浮躁了点。这种程度的答案说明你在HTML/CSS方面的造诣只是了解这个层面，并不能让面试官眼前一亮。放眼整个中国，写页面的人何其多，像这种程度回答的人一定就像河里的沙子一样，一抓一大把。随便用脚趾头想想也知道，像度娘，企鹅公司花费那么多人力和财力来校园是肯定来挑金子的，不起眼的沙子就让它随波逐流，流到大海暖化石去吧。
目前，我所知道的不同有三点（欢迎补充）：
空间占据
回流与渲染
株连性
第一点，想必都知道；第二点我之前有多篇译文提过，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则具有人道主义关怀，虽然不得已搞死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），国内民众比较淡然（无渲染与回流）。



原文：