CSS中display:none和visibility:hidden的区别

大多数人很容易将CSS属性visibility:hidden和display:none混淆，他们都有隐藏元素的功能，看似没有什么不同，但是它们的差别却是很大的。

visibility:hidden

visibility被设置为hidden的时候，元素虽然被隐藏了，但它仍然占据着它的空间。例：

<script language="JavaScript">
function toggleVisibility(me){
   if (me.style.visibility=="hidden"){
     me.style.visibility="visible";
   } else {
     me.style.visibility="hidden";
   }
}
</script>
<div onclick="toggleVisibility(this)" style="position:relative">第一行文本将会触发"hidden"和"visible"属性，注意第二行的变化。</div>
<div>因为visibility会保留元素的位置，所以虽然第一行看不见了但位置还在，第二行内容不会上下移动。</div>

我们可以注意到，在第一行文本被隐藏后，虽然所占空间还在，但是点击事件已经不起作用了，这说明当元素被visibility:hidden属性设置为隐藏之后，不能再接收到其它事件了。

display:none

当元素的display属性被设置为none时，元素也将被隐藏，但元素所占空间将会消失，最明显的区别就是它周围的元素将会出现移动的现象。display有很多种属性值，如：display=”none|block|inline”，block将会使元素作为块级元素，将占据整个行，元素前后会带有换行符。inline将会使元素作为内联元素，只占据内容本身所需空间，前后不会出现换行符。示例：

<script language="JavaScript">
function toggleDisplay(me){
     if (me.style.display=="block"){
          me.style.display="inline";
          alert("文本现在是：'inline'.");
     } else {
          if (me.style.display=="inline"){
               me.style.display="none";
               alert("文本现在是:'none'. 3秒钟后自动重新显示。");
               window.setTimeout("blueText.style.display='block';",3000,"JavaScript");
          } else {
               me.style.display="block"; alert("文本现在是:'block'.");
          }
     }
}
</script>
<div>在<span id="blueText" onclick="toggleDisplay(this)" style="color:blue;position:relative;cursor:hand;">蓝色</span>文字上点击来查看效果.</div>

从示例中我们可以看出，当display被设置为none时，元素实际上就从页面中被移走，它下面的元素就会被自动上移，这说明元素所占的位置空间已经消失。

下面我们将display:”none|block|inline”和visibility:hidden|visible`放到一起进行演示：

<p>
     <span id="myspan" style="background-color: #FF0000;">This is a span</span> in a sentence.
</p>
<p>
     <button type=button onclick="myspan.style.display='block'">display属性设置为block</button>
     <button type=button onclick="myspan.style.display='inline'">display属性设置为inline</button>
     <button type=button onclick="myspan.style.display='none'">display属性设置为none</button>
     <button type=button onclick="myspan.style.visibility='hidden'">visibility属性设置为hidden</button>
     <button type=button onclick="myspan.style.visibility='visible'">visibility属性设置为visible</button>
</p>
<ul>
     <li>将元素设为display:block，会在该元素后换行。</li>
     <li>将元素设为display:inline，会消除元素换行。</li>
     <li>将元素设为display:none，隐藏该元素，元素消失且不占空间。</li>
     <li>将元素设为visibility:hidden，隐藏该元素，元素还在且占空间。</li>
     <li>将元素设为dvisibility:visible，显示该元素，不会更改元素已有的块儿或内联级别。</li>
</ul>