之前写过一篇有关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，那就再写篇有关两者的总结吧。