inline

　　常用的inline就是文字和圖片，其實inline真沒什麼好說的，大家可以把它想象成一個杯子裡的水，它是“流”，是沒有大小和形狀的，它的寬度取決於父容器的寬度。

　　因此，針對inline的標籤，你設定寬度和高度是無效的，通過監控可以知道，該元素實際的寬度和高度都是auto，並不是我們設定的值。

　　一個很基礎的問題：如何把inline元素轉換成“塊”元素？相信絕大部分人的回答是display:block，但是你應該知道這不是一個唯一的答案。至少我設定display:table也是可以的吧？

       還有兩種情況你應該去了解（如果你不知道的話）：

       第一，對inline元素設定float

       還是剛才那個例子，我們對span元素新增一個float:left，執行看看效果，你就會大吃一驚。從顯示的效果和監控的結果上看來，span元素已經“塊”化。注意，上一節剛剛講完float，不要忘記float的“破壞性”、“包裹性”，在這裡同樣適用。

       第二，對inline

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

3. block

　　本系列有一節重點講解了《盒子模型》，不知道大家看沒看過，或者說你已經很瞭解盒子模型了。

　　其實對於block，我覺得就是“盒子模型”。一個元素設定了block，它就必須遵循盒子模型的規則。因此，這裡也不再去詳細寫它了，大家可以去盒子模型那一節好好看看，就那麼點內容。

4. inline-block

　　這個話題還得從《瀏覽器預設樣式》這一節開始。瀏覽器預設樣式中規定了幾個html元素為display:inline-block，回顧一下。

　　初學者對於inline-block可能比較陌生，沒關係，一步一步來。首先，你應該知道inline是什麼樣子的，就是一般的文字、圖片；其次，你應該知道block是什麼樣子的，一般的div就是；最後，inline-block顧名思義，它既有inline的特性，又有block的特性，大家可以想想一般的button、input是什麼樣子的。

　　那button舉例子。我們在頁面中輸入若干個<button>，發現它們是“流”式排列的（可以對比一下若干個<div>的排列方式）。但是針對一個button，我們還可以自定義修改它的形狀，這樣就有“塊”的特徵。

　　因此，inline-block的特點可以總結為：外部看來是“流”，但是自身確實一個“塊”。不知道大家理解也無？