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隱藏元素後，元素不可見，而且不會佔有原來的空間。這就是這二種方法的區別，大家在使用時，根據自己的需要來選擇用哪種。