Display和Visibility的区别，你了解了吗？

采用CSS实现元素隐藏的方法有很多种，比如定位到屏幕之外、透明度变换等。而常见的两种方式是将元素设置为display:none或者visibility:hidden。

元素样式设置为display:none

当元素样式设置为display：none时，则该元素和它的子元素都会隐藏，不占据文档流（就是元素原本占据的空间会释放出来）。

给元素样式设置display:none<divclass="a">A</div><divclass="b">B</div><divclass="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的其他常见属性值及说明

元素样式设置为：visibility:hidden

visibility:hidden也可以将元素隐藏，但是依然显示着元素所占据的空间。如：

给元素样式设置visibility:none<divclass="a">A</div><divclass="b">B</div><divclass="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的其他属性值：