前端面试题：display:none与visibility:hidden的区别有哪些

 1.display: none不占据空间，即不在文档流中，而visibility:hidden还在文档流中。 通俗的来讲就是display: none的隐藏相当于完全消失不见了，而visibility:hidden相当于隐身，虽然看不见了，但是还占据一定的位置。

 display: none测试：
    <ul >
       <li>葡萄</li>
       <li style="display: none;">苹果</li>
       <li>草莓</li>
    </ul>

效果图如下：

visibility:hidden测试：
    <ul >
        <li>葡萄</li>
        <li style="visibility:hidden">苹果</li>
        <li>草莓</li>
     </ul>

效果图如下：

2.display: none子元素不可见。visibility:hidden的子元素如果设置visibility:visible则还可以看到。 即 visibility具有继承性,如果给父元素设置了这个属性,那么子元素也会继承这个属性,但是如果重新给子元素设置visibility:visible,则子元素又会重新显示出来

  display: none测试：
    <ul  style="display: none;">
       <li>葡萄</li>
       <li>苹果</li>
       <li>草莓</li>
    </ul>
   <hr />

效果图：

visibility:hidden测试：
    <ul style="visibility:hidden">
        <li>葡萄</li>
        <li style="visibility:visible">苹果</li>
        <li>草莓</li>
     </ul>
     <hr />

3.从上面也可以看到， display: none会影响计数器的计数，元素消失且不占据位置，计数器无法计数。visibility: hidden不会影响计数器的计数 ，只是元素看不见了，但占据位置，因此visibility: hidden相对于display: none会占一定的内存，存在一定内存消耗。也会影响页面的布局。

4.CSS3的transition支持visibility属性，但是并不支持display属性，transition可以配合visibility使用纯css实现hover进行延时显示和隐藏。

其外需要注意的是：​​​​​​​

visibility: hidden 相当于 display:none，能把元素隐藏起来，但两者的区别在于：

•  1、display:none 元素不再占用空间。
•  2、visibility: hidden 使元素在网页上不可见，但仍占用空间。

然而，visibility 还可能取值为 collapse 。

当设置元素 visibility: collapse 后，一般的元素的表现与 visibility: hidden 一样，也即其会占用空间。但如果该元素是与 table 相关的元素，例如 table row、table column、table column group 等，其表现却跟 display: none 一样，也即其占用的空间会释放。

在不同浏览器下，对 visibility: collapse 的处理方式不同：

•  1、visibility: collapse 的上述特性仅在 Firefox 下起作用。
•  2、在 IE 即使设置了 visibility: collapse，还是会显示元素。
•  3、在 Chrome 下，即使会将元素隐藏，但无论是否是与 table 相关的元素，visibility: collapse 与 visibility: hidden 没有什么区别，即仍会占用空间。