display:none;和 visibility: hidden;知多少

来源：互联网发布：嘉兴行知小学好吗编辑：程序博客网时间：2024/05/17 04:26

开头我想说，前端是跟任何部门都干仗的存在，众所周知网页是根据PSD来实现页面还原，DOM结构是写死的，而博主今天遇到的问题是后台想通过程序来控制元素的存在，如果当前元素隐藏了后面的元素自动补充，因为楼主签订了保密协议，所以具体的页面是不能展示的，我写了个简单的案例，我们看下

代码如下

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><style>*{ margin: 0 auto;  padding: 0;  list-style: none;}#one{width: 50px;height:50px; background: yellow; }#two{width: 50px;height:50px; background: yellow; margin-top:4%;}#three{width: 50px;height:50px; background: yellow;margin-top:4%;}</style><body><div id="one">1</div><div id="two">2</div><div id="three">3</div></body></html>

好了现在要求来了，后台猴说我不让第二个显示，最暴力的办法就是直接干掉第二盒子的代码，

哈哈，完事大吉了，有没有更高档上方法呢于是引出来今天的主人公

display:none;和 visibility: hidden;

这不都是隐藏吗，哪个都可以，是吗我们来瞅瞅

1.display:none；

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><style>*{ margin: 0 auto;  padding: 0;  list-style: none;}#one{width: 50px;height:50px; background: yellow; }#two{width: 50px;height:50px; background: yellow; margin-top:4%; display: none;}#three{width: 50px;height:50px; background: yellow;margin-top:4%;}</style><body><div id="one">1</div><div id="two">2</div><div id="three">3</div></body></html>

这个属性是可以的隐藏的，而且还是不占位置的隐藏，底下的元素后自动填充空位

visibility: hidden;

我们发现这个属性是占位置隐藏

display属性设定为“none”的元素将不产生任何的框（Box），也就是说，元素对布局没有影响，浏览器将不显示该元素，包括其后代元素。更不会占位。
而如果设定“visibility : hidden”则会生成元素框，只是元素“不可视”，而其他非视觉的属性都将生效，例如widht、padding等。

有人可能会说了，这早就知道，那下面呢的问题呢他们区别

空间占据
回流与渲染
株连性

第一点我们在上面讨论了，第二点display:none隐藏产生reflow和repaint(回流与重绘)，而visibility:hidden没有这个影响前端性能的问题，第三点估计没几个人知道

我们详细讨论下

什么是株连性：所谓“株连性”，就是如果祖先元素遭遇某祸害，则其子子孙孙无一例外也要遭。display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事。我们来看下详细的案例

通常情况下，我们给一个父元素应用visibility:hidden，则其子孙后代也都会全部不可见。于是，我们就会有类似的认识迁移：应用了visibility:hidden声明下的子孙元素如何不屈地挣扎都摆脱不了不可见被抹杀的命运。而实际上却存在隐藏“失效”的情况。

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><style>.visibilityHidden { visibility: hidden; }       .visibilityVisible { visibility: visible; }</style><body><p>    <a href="#" class="visibilityHidden">        <img class="visibilityVisible" src="img/name.png" />    </a></p></body></html>

我们看到即使我们父元素设置了

 visibility: hidden;

但是我们也可以加上别的样式显示出来

那display：none呢

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><style>.visibilityHidden {display: none; }       .visibilityVisible { display: block; }</style><body><p>    <a href="#" class="visibilityHidden">        <img class="visibilityVisible" src="img/name.png" />    </a></p></body></html>

结果是显示不出来

我总结如下

display:none，子孙后代全部搞死（株连性），（不留空间），导致全体民众哗然（渲染与回流）。
visibility:hidden则具有人道主义关怀，虽然不得已搞死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），国内民众比较淡然（无渲染与回流）。

好了这是今天的主题

但是关于display:none;还有更深的研究，先抛开问题

display:none元素的background-image图片是否加载？
<label>元素是否可以关联display:none表单元素，如提交按钮？
display:none元素显示时候为何可以触发CSS3 animation动画但无法触发CSS3 transition过渡效果？
display:none元素是否会影响CSS计数器的计数？

阅读全文

1 0