屬性 display 定義元素如何顯示，聽起來像廢話。

這里要來回顧一下之前在 HTML 教程講過的塊元素（block）和內(nèi)聯(lián)元素（inline），如果不記得就先復(fù)習(xí)一下。

visibility 屬性，則用于指定元素是可見還是隱藏。

顯示（display）

屬性 display 有以下幾個常用值：

• none

• block

• inline

• inline-block

其中 none 值表示這個元素被隱藏，只是這里的隱藏包括從布局上來說的，在頁面中的占據(jù)的空間也被釋放了。

而剩余的三個值，則可用于更改元素默認(rèn)的 display 值。

比如常見的塊元素 div，比較一下在修改了 display 屬性之后的顯示：

div {   height: 60px; /*為了區(qū)別inline和inline-block，特意定義了高度。*/   text-align: center;   font-size: 26px;   margin-top: 20px;   margin-left: 20px;   background-color: lightblue;   line-height: 60px; }  div.inline {   display: inline; }  div.inlineblock {   display: inline-block; } 

為了方便比較，使用 div 標(biāo)簽定義了一些顏色和邊距的樣式。

<div>默認(rèn)的display1</div> <div>默認(rèn)的display2</div> <div>默認(rèn)的display3</div>  <div class="inline">inline 1</div> <div class="inline">inline 2</div> <div class="inline">inline 3</div>  <div class="inlineblock">inlineblock 1</div> <div class="inlineblock">inlineblock 2</div> <div class="inlineblock">inlineblock 3</div> 

可以很明顯看出，默認(rèn)的塊元素 div 在修改了 display 之后，和內(nèi)聯(lián)元素及內(nèi)聯(lián)區(qū)塊元素的顯示一樣。

同樣地，我們也可以修改一個內(nèi)聯(lián)元素，或內(nèi)聯(lián)區(qū)塊元素的 display 屬性成其它值。

通常這樣做，是為了布局的需要。

比如說，把 li 元素的 display 屬性修改成 inline-block，以達(dá)到在橫排顯示菜單，同時還能控制菜單的高度和寬度。

試試以上效果使用 li 元素，該如何實(shí)現(xiàn)。

可見性（visibility）

visibility 屬性可以指定值為 hidden，以達(dá)到隱藏某個元素的效果，但它和 display:none 的區(qū)別在于，它不會釋放布局上元素占據(jù)的空間。

.visibility-hidden {   visibility: hidden; }  .display-none {   display: none; } 

定義兩個類，一個指定為 visibility 為 hidden，另一個指定 display 為 none。

<div>1</div> <div class="visibility-hidden"></div> <div>2</div>  <div>1</div> <div class="display-none"></div> <div>2</div> 

使用同樣的 div 代碼看一下效果：

非常明顯，使用 visibility 隱藏的元素，占據(jù)的空間還在，只是看不見元素本身的東西而已。

總結(jié)

• ?? display 屬性用于修改元素的顯示方式，可以把原本的塊元素變成內(nèi)聯(lián)元素，或反過來。

• ?? 修改元素的顯示方式，通常用于布局的需要，但更多的建議使用元素默認(rèn)的顯示方式。

• ?? 使用 visibility:hidden 和 display:none 兩種方式都可以隱藏元素，區(qū)別在于 display 為 none 會釋放占據(jù)的空間。