前言还记得面试时被问到“请告诉我display:none和visibility:hidden的区别”吗？回答后display:none不占原位，visibility:hidden保留原位，面试官会不会会心一笑？其实，远不止这么简单！这篇文章，我们将一起深究两人之间的恩怨情仇，在接下来的采访中，我们可以更好地解答！深挖display:none我们都知道，当一个元素设置为display:none时，该元素将不会显示在界面上，该元素不占用布局空间，但我们仍然可以通过JavaScript对该元素进行操作。但为什么？这就涉及到浏览器的渲染原理：浏览器会解析HTML标签生成DOMTree，解析CSS生成CSSOM，再将DOMTree和CSSOM合成生成RenderTree。RenderTree中的元素对应0个或多个盒子，然后浏览器Layout，用盒子模型的信息渲染界面。设置为display:none的元素并不会在RenderTree中生成对应的boxmodel，那么后续的布局和渲染工作自然就没什么了，至于DOM操作，还是可以的。但是除了以上知识点之外，还有以下8点我们需要注意1.原生默认display:none的元素其实浏览器原生元素中有很多display:none的元素，比如aslink,script,style,dialog,input[type=hidden],etc.2.HTML5中增加了hidden布尔属性，允许开发者自定义元素的隐藏/*兼容不支持hidden属性的原生浏览器*/[hidden]{display:none;
