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的样式，设置了另一个颜色作背景色，并加了最小高度，如图

（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隐藏元素后，元素不可见，而且不会占有原来的空间。这就是这二种方法的区别，大家在使用时，根据自己的需要来选择用哪种。