display：none 和visiablility：hidden 的区别

display:none和visible:hidden都能把网页上某个元素隐藏起来，但二者有区别:

区别一：

display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上完全消失，通俗来讲就是看不见也摸不到。visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的物理空间没有改变，通俗来讲就是看不见但摸获得。 如：

<p><span style="display: none;">世界在向我招手</span>你好吗</p>

它展示出来的效果是

此时前面内容区域的位置没有了，后面的内容就自动的往前填充 而若是设置为visible:hidden时

<p><span style="visibility:hidden">世界在向我招手</span>你好吗</p>

能够发现第二张图片中中它留出了"世界在向我招手”内容区域，后面的内容仍是在原来的位置上

正常状况下是这样子的

区别二

display:none隐藏产生reflow和repaint(回流与重绘)，而visibility:hidden没有这个影响前端性能的问题；

什么是回流和重绘？

回流：当render tree中的一部分(或所有)由于元素的规模尺寸，布局，隐藏等改变而须要从新构建。这就称为回流(reflow)。 重绘：当render tree中的一些元素须要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，好比background-color。则就叫称为重绘。

区别三

株连性方面的差别;所谓“株连性”，就是若是祖先元素遭遇某祸害，则其子子孙孙无一例外也要遭殃； display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素所有不可见，并且不管其子孙元素如何不屈地挣扎都无济于事。 而对于visibility来讲，若是父元素应用visibility:hidden，则其子孙后代也都会所有不可见。但能够经过 应用visibility:visible而显现出来；