有些人简单的认为display: none;和visibility: hidden;

 

这两个属性的区别在于前者隐藏后不占据文档空间。

 

后者隐藏后会占据文档空间。

 

其实visibility: hidden并不是你想的这个简单。

 

visibility是一个你低估了的属性，

 

我们都知道visibility: hidden;是具继承性的，

如果父级元素设置了visibility: hidden;

那么子集元素也会看不见。

但是如果子集元素设置了visibility: visible;

则该子元素又会显示出来

这个和display:none有着本质的区别

<ul>

    <li>你看不见我1</li>

    <li class="second-li">你看不见我2</li>

    <li>你看不见我3</li>

    <li>你看不见我4</li>

</ul>

 

<style type="text/css">

    ul{

            visibility: hidden;

            background: pink;

    }

    .second-li{

            visibility: visible;

    }

</style>

我们发现虽然最外层的ul虽然被visibility: hidden

但是其子元素设置了 visibility: visible

那么该子元素就会被显示出来