display:none 和visibility区别

这两天在回顾学习过的知识，春招在即，想找个好实习得好好看书才是。也学到自己以前不知道，不明白的知识点，感觉挺好的。

dispaly:none

会让元素从渲染树中消失，渲染的时候不占据任何空间，它是一个非继承属性，子孙节点消失是由于元素从渲染树中消失造成的，通过修改子孙节点的属性，无法显示,读屏器不会读取 dispaly:none 元素的内容

visibility:hidden

不会让元素从渲染树中消失，渲染的时候仍占据空间，只是内容不可见。它属于继承属性，其子孙节点会继承它的属性，但是可以通过设置 visibility:visible. 让子孙节点显示。读屏器会读取元素内容。

代码实例：

<div  style='background:red;width:30px;height:30px'></div>
<div  style='background:yellow;width:30px;height:30px;visibility:hidden'></div>
<div  style='background:red;width:30px;height:30px'></div>
<div  style='background:red;width:30px;height:30px;display:none'></div>
<div  style='background:yellow;width:30px;height:30px'></div>

效果图：