重拾css(10)——display

1.引言

html元素，除了「塊」就是「流」（即平時常說的塊級元素和行內元素），並且「流」都包含在「塊」中，例如body就是一個「塊」，而a就是一個「流」。瀏覽器默認樣式中規定了html元素哪些屬於「塊」（剩下的就是「流」）。

其實，這部分知識都囊括在display這個樣式設置中。在網上查找出display全部的屬性，你會發現它有不少，可是不是每一個都經常使用，甚至大部分你都沒有用過。這個不要緊，學以至用，用不到的就能夠先不學，知道就行，何時用，何時再去詳細學——前提是你知道有這麼個東西，不然無從下手。

經常使用的有：none、block、inline、inline-block、list-item、table、table-cell、inherit，有些已在《瀏覽器默認樣式》中講過，簡單描述以下：

1. list-item：用於模擬li列表樣式；

2. table：也是一個「塊」，但和block相比，table具備包裹性；

3. table-cell：用於模擬表格單元格（相似table中的<td>和<th>）；

4. inherit：從父元素繼承display屬性的值。

接下來介紹其餘幾個經常使用的display值。

2.inline

經常使用的inline就是文字和圖片，其實inline真沒什麼好說的，你們能夠把它想象成一個杯子裏的水，它是「流」，是沒有大小和形狀的。

<span style="border: 1px solid #ccc; width: 500px; height: 100px;">Hello World!</span>

上圖可知，針對inline的標籤，你設置寬度和高度是無效的，經過監控能夠知道，該元素實際的寬度和高度都是auto，並非咱們設定的值。

那麼，如何把inline元素轉換成「塊」元素呢？

最簡單的是設置display:block;或display:table;

還有兩種方式應該瞭解：

第一，對inline元素設置float

仍是剛纔那個例子，咱們對span元素添加一個float:left，運行看看效果：

<span style="border: 1px solid #ccc; width: 500px; height: 100px; float: left;">Hello World!</span>

從顯示的效果和監控的結果上看來，span元素已經「塊」化。注意，上一節剛剛講完float，不要忘記float的「破壞性」、「包裹性」，在這裏一樣適用。

第二，對inline元素設置position:absolute/fixed

仍是有同一個例子作演示，此次在span元素上加上absolute/fixed，效果你們應該能猜到，和加上float的效果相同。至於absolute/fixed有什麼特性，會在下一節介紹position時提到。

<span style="border: 1px solid #ccc; width: 500px; height: 100px; position: absolute;">Hello World!</span>

3.block

其實對於block，我以爲就是「盒子模型」。一個元素設置了block，它就必須遵循盒子模型的規則。所以，這裏也再也不去詳細寫它了，你們能夠去盒子模型那一節好好看看，就那麼點內容。

4.inline-block

瀏覽器默認樣式中規定了幾個html元素爲display:inline-block;。

首先，你應該知道inline是什麼樣子的，就是通常的文字、圖片；其次，你應該知道block是什麼樣子的，通常的div就是；最後，inline-block顧名思義，它既有inline的特性，又有block的特性，你們能夠想一想通常的button、input是什麼樣子的。

咱們在頁面中輸入若干個<button>，發現它們是「流」式排列的（能夠對比一下若干個<div>的排列方式）。可是針對一個button，咱們還能夠自定義修改它的形狀，這樣就有「塊」的特徵。

所以，inline-block的特色能夠總結爲：外部看來是「流」，可是自身倒是一個「塊」。