联系：都是让元素不可见 区别： 1、display:none让元素从渲染树中消失，渲染的时候不占据任何空间；visibility:hidden不会让元素从渲染树中消失，渲染时占据空间，只是内容不可见。 2、display:none是非继承属性，子节点消失，由于元素从渲染树消失造成，修改子节点属性也无法显示；visibility:hidden是继承属性，子节点消失，由于继承了hidden，通过设置visibility:visible可以让子节点显示。 3、修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。 4、阅读器不会读取display:none,元素内容，会读取visibility:hidden元素内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box1 { width: 200px; height: 200px; background-color: #2aabd2; display: none; } .box1 .child { width: 100px; height: 100px; background-color: yellowgreen; display: inline-block; } .box2 { width: 200px; height: 200px; background-color: #2aabd2; visibility: hidden; } .box2 .child { width: 100px; height: 100px; background-color: yellowgreen; visibility: visible; } </style> </head> <body> <div class="box1"> <div class="child"> box1</div> </div> <div class="box2"> <div class="child"> box2</div> </div> </body> </html>