CSS隐藏元素的方法

CSS隐藏元素的方法

首先，我所知道的css隐藏元素的方法一共有3种，分别是用display，visibility，opacity这三种方式，接下来用一个简单的案例来对比一下它们的不同。

1.首先先创建一个盒子包含3个子盒子。

<div id="main">
    <div id="box1">
    </div>
    <div id="box2">
    </div>
    <div id="box3">
    </div>
</div>

2.我们给父盒子添加浮动布局 ，这样便于观察结果,只给中间的盒子固定宽度，上下两个盒子各占剩下的部分的一半。

#main{
    display: flex;
    width: 100%;
    height: 400px;
    background-color: beige;
}
#box1{
    flex: 1;
    height: 200px;
    background-color: aquamarine;
}
#box2{
    width: 200px;
    height: 200px;
    background-color: gold;
}
#box3{
    flex: 1;
    height: 200px;
    background-color: greenyellow;
}

这时的结果是：

很显然，页面有3个盒子。

3.这时，我们将第二个盒子加上display:none;。

#box2{
    display:none;
    width: 200px;
    height: 200px;
    background-color: gold;
}

此时，结果是：

我们会发现中间的盒子颜色不见了，两边盒子填充了它的空间，这说明display:none会使盒子的占地位置也消失。

4.我们将第二个盒子的display:none;注释掉，加上visibility:hidden;。

#box2{
    /* display: none; */
    visibility:hidden;
    width: 200px;
    height: 200px;
    background-color: gold;
}

结果为：

我们会发现box2虽然消失了，但占地位置还在。

5.最后，我们再给visibility:hidden加上注释，加上opacity:0;。

#box2{
    /* display: none; */
    /*visibility:hidden;*/
    opacity:0; 
    width: 200px;
    height: 200px;
    background-color: gold;
}

最终结果是：

我们会发现结果和visibility:hidden，元素消失了，但占地位置还在。

6.通过对上面盒子结果的对比，可以发现使用display:none使box2原有的占地空间也会消失。但是其原有的空间不会消失。而visibility:hidden和opacity:0得出的结果一样，会使box2隐藏，但是其原有的空间不会消失。

总结

display:none;隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢。

visibility:hidden;隐藏对应的元素，但在文档布局中仍保留原来的空间。

opacity:0;内容不可见，占据空间。