Css visibility和display的使用

在CSS样式中,我们如果要设置一个html元素不可见,可以用visibility=hidden,也可以用display=none。这二者有什么区别?下面一起来看下

01、首先看下我们例子的html代码,主要是二个div,分别有样式v,和d,这二个div都有一个父div,父div样式名都是fc
<divclass="fc">
<divclass="v">
visibility的使用
</div>
</div>
<divclass="fc">
<divclass="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、看下页面显示效果,如图。
第二个div隐藏不见了,而且它的父div显示的高度只有10px,就是它自己的样式min-height的值。而不是隐藏的div的高度(100px)
所以,用display:none隐藏元素后,元素不可见,而且不会占有原来的空间。

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