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;内容不可见,占据空间。