Css visibility和display的使用 _小知识

在CSS样式中，我们如果要设置一个html元素不可见，可以用visibility=hidden，也可以用 display=none 。这二者有什么区别？下面一起来看下操作方法 01 首先看下我们例子的html代码，主要是二个div，分别有样式v, 和d, 这二个div都有一个父div，父div样式名都是fc
<div class="fc">
<div class="v">
visibility的使用
</div>
</div>
<div class="fc">
<div class="d">
display的使用
</div>
</div>

文章插图

02 看下二个div的样式，.v, .d的样式现在都是完全一样的，如图，
我们主要设置了背景色，宽度和高度

文章插图

03 再看下父div的样式，.fc设置了另一个颜色作背景色，并加了最小高度，如图

文章插图

04 先看下页面显示效果，如图，二个div的显示效果都一样。

文章插图

05 我们先为第一个div加上visibility: hidden，让它隐藏起来，

文章插图

06 显示效果如图，可以看到，这个div隐藏看不到了，但它的父div还是显示100px的高度（这个是已经隐藏的div的高度）。
所以用visibility: hidden隐藏元素后，元素虽然不可见了，但还会占有原来的空间。

文章插图

07 我们再为第二个div加上display: none，让它隐藏起来，

文章插图

08 【Css visibility和display的使用】看下页面显示效果，如图。
第二个div隐藏不见了，而且它的父div显示的高度只有10px，就是它自己的样式min-height的值。而不是隐藏的div的高度（100px)
所以，用display: none隐藏元素后，元素不可见，而且不会占有原来的空间。

这就是这二种方法的区别，大家在使用时，根据自己的需要来选择用哪种。