"display"屬性

display 是CSS中最重要的用於控制佈局的屬性。每個元素都有一個預設的 display 值，這與元素的型別有關。對於大多數元素它們的預設值通常是 block 或 inline 。一個 block 元素通常被叫做塊級元素。一個 inline 元素通常被叫做行內元素。

• block

div 是一個標準的塊級元素。一個塊級元素會新開始一行並且儘可能撐滿容器。其他常用的塊級元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。

• inline

span 是一個標準的行內元素。一個行內元素可以在段落中 <span> 像這樣 </span>包裹一些文字而不會打亂段落的佈局。 a 元素是最常用的行內元素，它可以被用作連結。

• none

另一個常用的display值是 none 。一些特殊元素的預設 display 值是它，例如 script 。 display:none 通常被 JavaScript 用來在不刪除元素的情況下隱藏或顯示元素。

它和 visibility 屬性不一樣。把 display 設定成 none 元素不會佔據它本來應該顯示的空間，但是設定成 visibility: hidden; 還會佔據空間。

• 其他 display 值

還有很多的更有意思的 display 值，例如 list-item 和 table 。這裡有一份詳細的列表。之後我們會討論到 inline-block 和 flex 。

• 額外加分點

就像我之前討論過的，每個元素都有一個預設的 display 型別。不過你可以隨時隨地的重寫它！雖然“人為製造”一個行內元素可能看起來很難以理解，不過你可以把有特定語義的元素改成行內元素。常見的例子是：把 li 元素修改成 inline，製作成水平選單。