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
看下頁面顯示效果，如圖。
第二個div隱藏不見了，而且它的父div顯示的高度只有10px，就是它自己的樣式min-height的值。而不是隱藏的div的高度（100px)
所以，用display: none隱藏元素后，元素不可見，而且不會占有原來的空間。

這就是這二種方法的區別，大家在使用時，根據自己的需要來選擇用哪種。
End