要说区别先说两者之间的联系，他们都能让元素不可见，但是深入了解却发现各有不同。
区别
-
1、display:none;会让元素完全从渲染书中消失，渲染的时候不占据任何空间；visibility:hidden;不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见。
-
2、display: none ;是⾮继承属性，⼦孙节点消失由于元素从渲染树消失造成，通过修改⼦孙节点属性⽆法显示 ；visibility: hidden; 是继承属性，⼦孙节点消失由于继承 了 hidden ，通过设置 visibility: visible; 可以让⼦孙节点显式
-
3、修改常规流中元素的display通常会造成文档的重排，但是 visibility 属性只会造成本元素的重绘
-
4、读屏器不会读取 display:none; 元素内容；但是会读取visibility:hidden;元素内容
