据说今年前端面试中，出现了很多次关于display：none与visibility：hidden区别的题目。不仅仅是
display：none与visibility：hidden在前端工作中也有很多的坑，例如：
1、{
<ul>
<li>有序列表</li>
</ul>
}
2、 <ol>
<li>无序列表</li>
<li>无序列表</li>
</ol>
3、{
<dl>
<dt>自定义列表</dt>
<dd>自定义列表</dd>
</dl>
}像这样很基础的问题也许就是考验一个程序员的基础能力和扩展能力，有时候别看是一道题，从中可以暴露出一个人的人多东西。HR是最懂得察言、观色、攻心，的角色。
display：none与visibility：hidden区别
虽然两者都是对，对象的隐藏，但是使用时会对其他元素产生影响。
display:none 隐藏对象,隐藏对象其物理空间。
visibility:hidden 隐藏对象,保留其占据的物理空间。
用一个案例说明
<style>
#wrap{
width: 100px;
height: 100px;
background: red;
text-align: center;
line-height: 50px;
font-size: 16px;
color: white;
}
#box1{
width: 50px;
height: 50px;
background: blue;
/*display: none;*/
visibility:hidden;
}
#box2{
width: 50px;
height: 50px;
background: yellow;
}
</style>
</head>
<body>
<div id="wrap">
<div id="box1">box1</div>
<div id="box2">box2</div>
</div>
</body>
1、对一个块级元素分别使用display：none & visibility：hidden产生的效果
（1）当对#box1添加声明display：none时
（2）当对#box1添加声明visibility：hidden时
2、display：none相当于在页面的物理世界中消失，因此，box2会浮动上去，但是visibility：hidden相当于隐身，说句不好听的就是占着茅坑不拉屎那种。
如果有一天你同样遭遇被问到这个问题：
以下答案仅供参考
-
普通回答，一个隐藏，但占据位置，一个隐藏，不占据位置
-
进一步，
display由于隐藏后不占据位置，所以造成了dom树的改变，会引发回流，代价较大 -
再进一步，当一个页面某个元素经常需要切换
display时如何优化，一般会用复合层优化，或者要求低一点用absolute让其脱离普通文档流也行。然后可以将话题引到普通文档流，absolute文档流，复合图层的区别， -
再进一步可以描述下浏览器渲染原理以及复合图层和普通图层的绘制区别（复合图层单独分配资源，独立绘制，性能提升，但是不能过多，还有隐式合成等等）
上面这些大概就是知识系统化后的回答，会更全面，容易由浅入深，而且一有机会就可以往更底层挖掘。
516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
