display与visibility的区别

CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏，但是两者还是有区别的，总结为以下三点：

1、被隐藏元素是否占据空间

2、后代元素的可见性

3、对计数器的影响

4、动画效果

下面分别对上述三个区别进行说明：

一、被隐藏元素是否占据空间

display:none隐藏后的元素不占据空间，visibility:hidden隐藏后的元素仍占据空间。

        .parent{
            width:300px;height:400px;background: #999;
        }
        .child1{
            width:200px;height:150px;background: #f00;
        }
        .child2{
            width:200px;height:150px;background: #0f0;
        }
        .hidden1{
            display: none;
        }
        .hidden2{
            visibility:hidden;
        }

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

对class为child1的元素，不添加隐藏相关样式、添加样式.hidden1、.hidden2，结果分别对应下面三个图：

             

二、后代元素的可见性

对于display，如果计算值是none，则该元素及其所有后后代均隐藏，即使后代设置block为其他值也不起作用；对于visibility，是具有继承性的，父元素设置了visibility:hidden，子元素继承该属性值也看不见，但是子元素设置了visibility:visible后，该子元素便可见。

三、对计数器的影响

display:none会影响计数器计数，而visility:hidden不会

四、动画效果

CSS3 transition支持的属性中有visibility，但是没有display。