轉自http://blog.csdn.net/czf164
"
CSS中的display和visibility
css中display和visibility文法，他們都可以隱藏和顯示html元素。看齊來他們很相似，所以很多人還是會搞錯。
談們的屬性分別如下：
display:none|block;
display:none;時隱藏該html元素，確切的說，是在瀏覽器中消除該元素，不佔螢幕的空間。若其下有其他元素，就會上移到該空間地區（好像桌子上有100塊錢，現在我把它放在抽屜裡藏起來，桌子上放100錢的地方可以放在其他任何東西）。
dispaly:block;顯示已經隱藏的html元素，如果別的元素佔有了該空間時，他將下移，空間重新別原來的元素佔有。（把100塊錢重新從抽屜裡那出來放回桌子上）
visibility：hidden|visible;
visibility:hidden;隱藏該元素，正真的隱藏，但他還佔有那塊空間。這時，（桌子上有100塊錢，這是我蓋了桌布把他隱藏起來，錢還在那裡）。
visibility:visible;讓元素顯示（拿掉了桌布，看到了100塊錢）。
接下來用代碼來舉個例子，代碼：
<html>
<head>
<script type="text/javascript">
function testDisplay()
{
var divD = document.getElementById("testD");
if(divD.style.display=="none")
{
divD.style.display = "block";
}
else
{
divD.style.display = "none";
}
}
function testVisibility()
{
var divV = document.getElementById("testV");
if(divV.style.visibility =="hidden")
{
divV.style.visibility ="visible";
}
else
{
divV.style.visibility = "hidden";
}
}
</script>
</head>
</body>
<div id="testD" style="border:#ddd 1px solid">
<div style="display:block;border:#ccc 2px solid">
<div style="visibility:visible;border:#aaa 2px solid">
Display
</div>
</div>
</div>
<div id="testV" style="border:#ddd 1px solid">
<div style="display:block;border:#ccc 2px solid">
<div style="visibility:visible;border:#aaa 2px solid">
Visibility
</div>
</div>
</div>
<input type="button" value="TestDisplay" onclick="testDisplay()"/>
<input type="button" value="TestVisibility" onclick="testVisibility()"/>
</body>
</html>
運行一下框中的代碼就可以看到，當testD隱藏時，裡面所有的框都隱藏，而且下面的divV和按鈕都上移，而當divV隱藏的時候，只有他自己隱藏了，裡面的其他元素都沒有隱藏。（這裡主要是把裡面的div元素style屬性設定為display和visible，如果去掉也會隱藏，但是，按鈕還是不會上移，可以試一下。）
"
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
