div+css樣式表中display和visibility的實例分析

從學習 div+css樣式表 到如今用div+css樣式表寫頁面最容易混淆的 css樣式 表屬性也莫過於display和visibility。從display和visibility的表現意思來看,沒有什麼不一樣，其實它們的差異倒是很大的。

首先來說css樣式表的visibility屬性

visibility屬性用來肯定元素是顯示仍是隱藏，visibility有兩個值,分別是visible和hidden;visible表示顯示，hidden表示隱藏。寫在樣式表裏邊就是這樣來表現的 style="visibility:visible \ 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">
第一行不會顯示可是會佔據原來的位置</div>

<div class="vsd">第二行顯示位置會空出第一行的位置，雖然沒有任何字符</div>

效果以下圖：

 

如今咱們再來說講：css樣式表的display屬性。display的屬性有不少：而咱們最經常使用的就是block,inline,none。visibility屬性是隱藏元素但保持元素的浮動位置，而display其實是設置元素的浮動特徵。

當display被設置爲block(塊)時，容器中全部的元素將會被看成一個單獨的塊，就像<div>元素同樣，它會在那個點被放入到頁面中。(實際上你能夠設置<span>的display:block，使其能夠像<div>同樣工做。

將display設置爲inline，將使其行爲和元素inline同樣---即便它是普通的塊元素如<div>，它也將會被組合成像<span>那樣的輸出流。

最後是display被設置：none,這時元素實際上就從頁面中被移走，並且不會留下位置，它下面所在的元素就會被自動跟上填充。下面看我實例的代碼

<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>

至於效果圖：你們但是輸入代碼本身查看一下，我就不用在這裏顯示了。

 

參考閱讀： div+css樣式樣表中float與clear的用法