之前寫過一篇有關visibility:hidden和display:none的文章：為什麼要用用visibility:hidden;代替display:none;？主要是從瀏覽器效能方面入手，卻沒寫兩者的主要區別，今天補充。
首先display:none,這個none會把元素從dom樹中“摘除”，這時其他元素會立馬填充該元素的位置，也就是說一旦設定為none，這個元素是真的不存在了。
而visibility:hidden,它就像一塊“抹布”，把花花綠綠的元素都擦成透明色，透明到我們看不到，但元素依然存在。就像一塊玻璃雖然透明到我們看不到，但依然存在佔領著原來就擁有的空間，不會像display:none;一樣從dom樹上摘除。這就是我目前階段所理解的。
以下是段小程式碼，效果立竿見影：
<html>
<head>
<style>
</style>
<script language="JavaScript">
function toggleDisplay(me){
if (me.style.display=="block"){
me.style.display="inline";
alert("Text is now 'inline'.");
}
else {
if (me.style.display=="inline"){
me.style.display="none";
alert("Text is now 'none'. It will reappear in three seconds.");
window.setTimeout("blueText.style.display='block';",3000,"JavaScript");
}
else {
me.style.display="block";
alert("Text is now 'block'.");
}
}
}
</script>
<body>
<div>
Click on the <span id="blueText" onclick="toggleDisplay(this)"
style="color:blue;position:relative;cursor:hand;">blue text</span> to
see how it affects the flow.
</div>
</body>
</html>下面是各個屬性值：
display的屬性值有block，inline，none。先說block，前端攻城師都能信手捏來一大批塊級元素和行內元素，這兩種元素的根本區別在於其display屬性的預設值，倘若display屬性的預設值是block，如<div>，那麼很明顯那它天生就是塊級元素，如果預設為inline，如<span>那很順其自然就是行內元素，因此，行內元素和塊級元素可以通過改變其預設的display屬性值來相互轉換，也就是說把<div>設為display:inline;那麼它也立馬成為行內元素，同樣<span>設為display:block;也會變成塊級元素。
visibility的屬性值有：visible,hidden,collapse,inherit.
visible為預設屬性，元素可見。
hidden如上所述，隱藏不可見（擦成透明，不顯示但依然佔有空間）
clooapse用於表格，作用與hidden一樣。
inherit表示遵從父元素的visibility屬性值，即繼承自父元素。
說起inherit那就不得不提auto，那就再寫篇有關兩者的總結吧。