關於 "display" 屬性

display 是設計 CSS 版面配置中最重要的屬性，每個 HTML 元素都有一個預設的 display 值，不同的元素屬性會有不同的預設值。大部分元素的 display 屬性，預設值通常是 block 或 inline 其中一個。若該元素的 display 屬性被標示為 block 就被稱為「區塊元素」，若被標示為 inline 就稱為「行內元素」。

block

<div>

div 是一個標準的區塊元素。一個區塊元素會讓其內容從新的一行開始顯示，並盡可能的撐滿容器。其他常用的區塊元素包括 p 、 form 以及一些 HTML5 新出現的元素，例如：header 、 footer 、 section 等等。

</div>

inline

span 是一個標準的行內元素。一個行內元素可以在段落中 <span> 像這樣 </span> 包裹一些文字片段，透過 CSS 點綴其樣式，且不會打亂段落原本的版面配置。 a 元素是最常見的行內元素，它可以被用作超連結之用。

none

另一個常用的 display 值是 none 。有一些特殊的元素 display 預設值會套用 none 屬性值，例如 script 元素就是個典型的例子。display:none 通常會搭配 JavaScript 一起使用，我們可以透過 JavaScript 動態修改元素的 display 屬性，用以隱藏或顯示該元素，而不是將元素從頁面中刪除或重建。

display 和 visibility 屬性不一樣，把 display 設定成 none 不會保留元素原本該顯示的空間，但是 visibility: hidden; 會讓元素的內容看不見，但會保留原本內容應該顯示的空間，只是看不到內容而已。

You found me!

其他 display 值

還有很多其他的 display 值，例如 list-item 和 table 等等，這裡有一份詳細的列表，你可以連進去查看完整的屬性值清單。稍後我們會探討 inline-block 和 flex 這兩個屬性。

補充說明

就像我之前說過的，每個元素都有一個預設的 display 屬性，不過你可以隨時隨地地覆蓋這個屬性值。雖然我們把 div 修改成一個「行內元素」好像還蠻怪的，不過實務上來說我們會把某些元素修改掉預設的 display 屬性，好讓它可以呈現有特定語義的元素。其中比較常見的例子就是把 li 元素修改成 inline，以便我們將該元素正確地呈現在水平的選單上。

  • Creative Commons License