display:none 和 visibility:hidden 的区别

  相同点

  display：none 和 visibility：hidden 都能把网页上的某元素隐藏起来

  不同点

   display:none  

　　不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失。隐藏产生回流和重绘（reflow 和 repaint），我们来看一下具体效果：

<div>
    <strong>给元素设置display：none样式</strong>
    <p>A元素</p>
    <p style="display: none">B元素</p>
    <p>C元素</p>
</div>

 

     

  值得注意的是：display:none 就是“株连性”明显的声明：一旦父节点元素应用了 display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事。

 

   visibility:hidden 

 　　使对象在页面上不可见，但页面上的空间还在。隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。只产生重绘，我们来看一下具体效果：

<div>
    <strong>给元素设置visibility：hidden</strong>
    <p>A元素</p>
    <p style="visibility: hidden">B元素</p>
    <p>C元素</p>
</div>

 

   

  还有一点要注意：visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别