visibility:hidden 和 display:none

visibility:hidden 和 display:none 的区别

1、继承：

display不是继承属性，而visibility是继承属性。

后代元素的visibility属性若存在，则不会继承； 若不存在，则会继承父元素的visibility的值。

父元素的visibility为hidden但是子元素的visibility为visble，那么子元素依旧可见，子元素visibility属性不存在则子元素不可见。而父元素display属性设为none后，子元素全部不可见。

2、空间：

设置display: none后，该元素如同不存在，但是依然存在在文档对象模型中； 设置visibility:hidden后，该元素占的空间会被空白占位。

3、渲染：

页面相关属性改值后是否重新渲染：display: none渲染，visibility:hidden不渲染。