CSS Display與Visibility的不同

大多數人很容易將css屬性display和visibility混淆，它們看似沒有什麼不同，其實它們的差別卻是很大的。

visibility屬性用來確定元素是顯示還是隱藏的，這用visibility="visible|hidden"來表示（visible表示顯示，hidden表示隱藏）。

當visibility被設定為"hidden"的時候，元素雖然被隱藏了，但它仍然佔據它原來所在的位置。例：

程式設計客棧nclick="togglevisibility(this)" style="position:relative">第一行文字將會觸發"hidden"和"visible"屬性，注意第二行的變化。

因為visibility會保留元素的位置，所以雖然第一行看不見了但位置還在，第二行內容不會上下移動。

注意到，當元素被隱藏之後，就不能再接收到其它事件了，所以在第一段**中，當其被設為"hidden"的時候，就不能再接收響應到事件了，因此也就無法通過滑鼠點選第一段文字令其顯示出來。

另一方面，display屬性就有一點不同了。visibility屬性是隱藏元素但保持元素的浮動位置，而display實際上是設定元素的浮動特徵。

當display被設定為block(塊)時，容器中所有的元素將會被當作乙個單獨的塊，就像元素一樣，它會在那個點被放入到頁面中。(實際上你可以設定的display:block，使其可以像一樣工作。

將display設定為inline，將使其行為和元素inline一樣---即使它是普通的塊元素如，它也將會被組合成像那樣的輸出流。

下面看我例項的**和效果：

在藍色文字上點選來檢視效果.

最後是display被設定：none，這時元素實際上就從頁面中被移走，它下面所在的元素就會被自動跟上填。（此時應用display: none;的元素相當於消失，而visibility: hidden;則只表示隱藏，位置還在。）

display 屬性分別為block, inline, none 值及使用visibility: hidden;的情況除錯示例：

this is a span in a sentence.

程式設計客棧'">

同時，關於display:inline;和float:left;兩者的區別可以參看該篇文章：

（display是指顯示狀態，inline表示內聯，特點是緊貼著前乙個內聯元素，通常預設的內聯元素有span,a,em,strong等。而float表示的是浮動，float:left，是針對塊級元素的浮動形式，是不同形式的兩種狀態。）

float &inline

span為內聯/inline元素，給他寬度程式設計客棧賦值是沒有效果的。

span為內聯/inline元素，給他寬度賦值100px+float:right;可以看到有了寬度。

這個li被定義為內聯/inline,設定寬度沒有效果

這個li被定義為內聯/inline+float:left,設定寬度有效果

本文標題: css display與visibility的不同

本文位址:

點讚打賞

分享如果認為本文對您有所幫助請贊助本站

標籤：css display visibility

css實現強制瀏覽器分頁css教程:網頁input輸入框立體效果

您可能感興趣的文章: