display:none和visibility:hidden的区别？

1，display：none会让元素从渲染树中消失，渲染的时候不占据任何空间；visibility：hidden不会让元素从渲染树中消失，渲染的时候仍然占据空间，只是内容不可见。
2，display：none是非继承属性，子孙节点消失是由于元素从渲染树中消失造成，通过修改子孙节点的属性无法显示；visibility：hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility：visible，可以让子孙节点显示。
3，读屏器不会读取display：none的元素内容，而会读取visibility：hidden的元素内容。

demo：

<p>可以自己试试哦，一目了然。 </p>

<div id=d1 style='background:red;width:30px;height:30px'></div>

<div id=d2 style='background:yellow;width:30px;height:30px;visibility:hidden'></div>

<div id=d3 style='background:red;width:30px;height:30px'></div>

<div id=d4 style='background:red;width:30px;height:30px;display:none'></div>

<div id=d5 style='background:red;width:30px;height:30px'></div>

转载于:https://my.oschina.net/u/3652781/blog/1535079