采用CSS实现元素隐藏的方法有很多种，比如定位到屏幕之外、透明度变换等。而常见的两种方式是将元素设置为display:none或者visibility:hidden。
元素样式设置为display:none
当元素样式设置为display：none时，则该元素和它的子元素都会隐藏，不占据文档流（就是元素原本占据的空间会释放出来）。
给元素样式设置display:none
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>样式设置为
.a,.b,.c{
width:50px;
height:50px;
text-align:center;
background:blue;
margin-top:5px;
line-height:50px;
color:red;
}效果如：
图片
添加display:none后效果如下：
图片
B原本占据的空间会释放出来。
display的其他常见属性值及说明
属性值 | 说明 |
block | 元素转化为块级元素显示 |
inline | 元素转化为行内元素显示 |
inline-block | 自身元素转化为行内元素，相邻的行内元素显示在一行，但其子元素为块级元素显示 |
元素样式设置为：visibility:hidden
visibility:hidden也可以将元素隐藏，但是依然显示着元素所占据的空间。如：
给元素样式设置visibility:none
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>css样式：
.a,.b,.c{
width:50px;
height:50px;
text-align:center;
background:blue;
margin-top:5px;
line-height:50px;
color:red;
}
.b{
visibility:hidden;
}效果如下：
图片
visibility的其他属性值：
属性值 | 说明 |
inherit | 继承父元素的visibility属性设置 |
visible | 默认值 |
