display: none 和 visibility: hidden 区别

•  display:none 元素看不见，也不占据页面空间； visibility: hidden 看不见但仍然占据页面空间；

• display:none 依然保留在 DOM 树，但不会在 render 树； visibility: hidden 两棵树都在；

• display:none 子元素无论怎么修改样式，都是不可见的； visibility: hidden 子元素：

  由于 visibility 属性是可继承的，所以当父元素为 hidden 而子元素没有设置时，其值继承父元素，也不可见，但是可以认为设置 visibility:visible ，这样一来子元素就可见了。

• 接下来看一下例子

    <style>
        #test {
            height: 500px;
            background-color: blueviolet;
        }
        #test1 {
            height: 200px;
            background-color: brown;
        }
        #test2 {
            height: 300px;
            background-color: yellowgreen;
        }
        
    </style> 
    <div id="test">
        <div id="test1"></div>
        <div id="test2"></div>
    </div>

第一点：

给 test1 添加 display:none，给 test2 添加 visibility: hidden，后：

第三点：

给 test 设置 visibility: hidden，给 test1 不设置 display 或 visibility，给 test2 添加 visibility:visible，后：