display:none与visibility:hidden的区别？
发布时间:2022-09-09 15:05:48
发布人:wjy
这两个属性都是让元素隐藏，不可见。两者区别如下：
1、在渲染树中
display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间；visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。
2、是否是继承属性
display:none是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示；
3、修改常规文档流中元素的 display 通常会造成文档的重排，但是修改visibility属性只会造成本元素的；
4、如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。
