display:none;和visibility:hidden;区别

dispaly:none;

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

visibility:hidden;

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