搜尋

容器顯示類型 ( display )

網頁中所有的元素 ( 包含文字 ) 都是一種矩形方框的「容器」，每個容器具有各自的「顯示類型」，這些類型會影響容器彼此間的尺寸、位置、對齊等排版顯示方式，這篇教學會介紹 CSS display 樣式屬性，深入理解 inline、block、inline-block、table、grid、flex 這些不同的容器顯示類型。

CSS 教學 - 容器顯示類型 ( display )

display 樣式屬性

display 樣式屬性可以設定元素的「容器顯示類型」，沒有繼承特性，網頁中每個元素都會有自己的 display 屬性值，如果屬性值改變，該元素的容器類型會發生變化，對應的顯示方式也會跟著改變，W3C 將容器顯示類型分成六大類：

display: inline

inline 屬性的元素會產生一個「行內容器」，行內容器具有下列特色：

  • 前後沒有換行符：如果單行的長度允許，且後方元素不具有換行符，就會將前後元素放在同一行。
  • 不能調整寬高：寬高由內容字數的多寡、尺寸自動產生。

通常只要是「文字」或「文字樣式」相關的 HTML 元素，都是屬性為 inline 的元素，下方範例展示 HTML 預設和設定 display:inline; 的元素會排列在同一行。

線上展示：https://codepen.io/oxxo/pen/oNRqeyw

<!-- HTML 程式碼 -->
<h1>apple</h1>
<h2>banana</h2>
<span>hello</span>
<em>oxxo</em>
<strong>good</strong>
<sub>morning</sub>
<sup>yes!!</sup>
<a href="google.com">google</a>

<!-- CSS 程式碼 -->
<style>
  h1, h2 {display: inline;} /* 這些元素預設為 display: block; */
</style>

CSS 教學 - 元素容顯示類型 ( display ) - display: inline

display: block

block 屬性的元素會產生一個「區塊容器」，區塊容器具有下列特色：

  • 前後有換行符：出現區塊容器會強制換行。
  • 可以設定寬高：使用長度單位數值設定寬高尺寸。

通常只要是「div、p 或 h1～h6」相關的 HTML 元素，都是屬性為 block 的元素，下方範例展示 HTML 預設和設定 display:block; 的元素會換行並垂直排列。

線上展示：https://codepen.io/oxxo/pen/WNBzEym

<!-- HTML 程式碼 -->
<h2>apple</h2>
<h3>banana</h3>
<span>hello</span>
<em>oxxo</em>
<strong>good</strong>
<a href="google.com">google</a>

<!-- CSS 程式碼 -->
<style>
  span, em, strong, a {display: block;}  /* 這些元素預設 display: inline; */
</style>

CSS 教學 - 元素容顯示類型 ( display ) - display: block

display: flow

flow 屬性的元素會變成「呈現元素流方向的容器」，基本上使用這個容器的效果和區塊容器相同，都會強制換行，下方範例將 span 元素設定為 display: flow;。

線上展示：https://codepen.io/oxxo/pen/eYaMEjp

<!-- HTML 程式碼 -->
<strong>oxxo</strong>
<span>apple</span>
<em>banana</em>

<!-- CSS 程式碼 -->
<style>
  span {display: flow;}
</style>

CSS 教學 - 元素容顯示類型 ( display ) - display: flow

display: flow-root

flow-root 屬性的元素會變成「元素流的根容器」，意思是在這個元素裡的子元素並不會影響到外部其他元素，使用後會強制換行，下方範例將 class 為 a 的 div 元素設定為 display: flow-root;，可以看見雖然子元素設定了 float: left;，卻不會影響到下層的 div，而 class 為 b 的 div 因為採用預設顯示類型，兩個 div 的會互相干擾。

線上展示：https://codepen.io/oxxo/pen/LYodjBL

<!-- HTML 程式碼 -->
<div class="a">
  <strong>apple</strong>
  <em>banana</em>
  <span>oxxo</span>
</div>
<div class="a">
  <strong>apple</strong>
  <em>banana</em>
  <span>oxxo</span>
</div>
<div class="b">
  <strong>apple</strong>
  <em>banana</em>
  <span>oxxo</span>
</div>
<div class="b">
  <strong>apple</strong>
  <em>banana</em>
  <span>oxxo</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    margin : 10px;
    border: 1px solid #000;
  }
  div * {float: left;}     /* div 子元素浮動靠左 */
  .a {display: flow-root;} /* 設定為這個元素流的根容器 */
</style>

CSS 教學 - 元素容顯示類型 ( display ) - display: flow-root

display: flex

flex 屬性的元素會變成「彈性容器」，彈性容器具有下列特色：

  • 使用 block 顯示方式：前後具有換行符，會強制換行。
  • 子元素變成彈性項目：搭配其他 flex 相關樣式，實作子元素的網格排版。

HTML 裡沒有預設 display: flex; 的元素，但越來越多網頁因為排版的需求，會將元素修改為 flex 屬性，下方範例展示 HTML 有設定 display:flex; 和沒有設定的 div 與其子元素的差異 ( 詳細的 flex 會在 Flexbox 排版的教學裡介紹 )。

線上展示：https://codepen.io/oxxo/pen/RwmMZBM

<!-- HTML 程式碼 -->
<div class="a">
  <span>oxxo</span>
  <em>apple</em>
  <strong>banana</strong>
  <a href="google.com">google</a>
</div>
<div class="b">
  <span>oxxo</span>
  <em>apple</em>
  <strong>banana</strong>
  <a href="google.com">google</a>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 300px;
    border: 1px solid #000;
    margin: 10px;
  }
  .a {
    display: flex; /* 彈性容器內容的空白會消失 */
  }
</style>

CSS 教學 - 元素容顯示類型 ( display ) - display: lex

display: grid

grid 屬性的元素會變成「網格容器」，網格容器具有下列特色：

  • 使用 block 顯示方式：前後具有換行符，會強制換行。
  • 子元素變成網格項目：搭配其他 grid 樣式，實作子元素的網格排版。

HTML 沒有預設 display: grid 的元素，但越來越多網頁因為排版的需求，會將元素修改為 grid 屬性，下方範例展示 HTML 有設定 display:grid; 和沒有設定的 div 與其子元素的差異( 詳細的 grid 會在網格排版的教學裡介紹 )。

線上展示：https://codepen.io/oxxo/pen/oNRqePe

<!-- HTML 程式碼 -->
<div class="a">
  <span>oxxo</span>
  <em>apple</em>
  <strong>banana</strong>
  <a href="google.com">google</a>
</div>
<div class="b">
  <span>oxxo</span>
  <em>apple</em>
  <strong>banana</strong>
  <a href="google.com">google</a>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 10px;
  }
  .a {
    display: grid;
    grid-template-rows: 20px;   /* 每一列高 20px */
    grid-template-columns: repeat(2, 100px); /* 每列兩欄，每欄 100px */
  }
</style>

CSS 教學 - 元素容顯示類型 ( display ) - display: grid

display: table

table 屬性的元素會變成「表格容器」，表格容器具有下列特色：

  • 使用 block 顯示方式：前後具有換行符，會強制換行。
  • 使用內容寬度：透過內容撐開寬度。
  • 子元素變成表格項目：搭配其他 table-* 屬性值，實作子元素的表格排版。

下方範例會將所有 div 裡頭的 span 轉換成類似表格 tr 的顯示方式，em 轉換成表格 td 的顯示方式，可以看出 class 為 a 的 div 會呈現出類似表格的長相，而另外的 div 只有內容類似表格，但外部仍保留 div 原本的顯示類型。

線上展示：https://codepen.io/oxxo/pen/MWdVvPY

<!-- HTML 程式碼 -->
<div class="a">
  <span>
    <em>apple</em><em>banana</em>
  </span>
  <span>
    <em>oxxo</em><em>coconut</em>
  </span>
</div>
<div class="b">
  <span>
    <em>apple</em><em>banana</em>
  </span>
  <span>
    <em>oxxo</em><em>coconut</em>
  </span>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 10px;
  }
  .a {
    display: table;
  }
  div span {
    display: table-row;  /* 等同 tr */
  }
  div em {
    display: table-cell; /* 等同 td */
  }
</style>

CSS 教學 - 元素容顯示類型 ( display ) - display: table

display: ruby

table 屬性的元素會變成「引用標示容器」( 參考「標示注音」)，引用標示容器具有下列特色：

  • 使用 inline 顯示方式：前後沒有換行符，不會強制換行。
  • 不能調整寬高：因為是 inline 的顯示類型，不能調整寬高。
  • 子元素變成標示項目：搭配 ruby-text 屬性值，讓子元素標示特定訊息。

HTML 的 ruby 元素通常作為「標示注音或發音」使用，下方範例會將 class 為 a 的 div 設定 display: ruby;，裡頭的 span 設定為 display: ruby-text; ( 等同 rt 元素 )，就能做出上下標著的效果，而另外一個 div 則是採用預設的樣式作為對照組。

線上展示：https://codepen.io/oxxo/pen/dyEmzgV

<!-- HTML 程式碼 -->
<div class="a">
  oxxo<span>apple</span>
  oxxo<span>banana</span>
  oxxo<span>orange</span>
</div>
<div class="a">
  oxxo<span>apple</span>
  oxxo<span>banana</span>
  oxxo<span>orange</span>
</div>
<div>
  oxxo<span>apple</span>
  oxxo<span>banana</span>
  oxxo<span>orange</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    margin: 10px;
    height: 100px;
    border: 1px solid #000;
  }
  .a {
    display: ruby;
  }
  .a span {
    display: ruby-text; /* 註解標示的文字 */
    padding: 0 2px;
  }
</style>

CSS 教學 - 元素容顯示類型 ( display ) - display: ruby

display: list-item

list-item 屬性的元素會變成「清單項目容器」，清單項目容器具有下列特色：

  • 類似區塊元素：前後具有換行符，會強制換行。
  • 必須要放在區塊元素裡：需要包覆一個區塊元素，不然就沒有作用。
  • 產生一個 ::marker 虛擬元素：這個虛擬元素負責清單符號樣式，可透過清單樣式設定。

HTML 的「li」元素是預設 display: list-item 的元素，下方範例會將 class 為 a 的 div 裡頭的元素轉換成 display: list-item，可以觀察出有設定和沒有設定的差異。

線上展示：https://codepen.io/oxxo/pen/NWVYvOJ

<!-- HTML 程式碼 -->
<div class="a">
  <strong>apple</strong>
  <em>banana</em>
  <span>oxxo</span>
</div>
<div class="b">
  <strong>apple</strong>
  <em>banana</em>
  <span>oxxo</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    margin : 10px;
    border: 1px solid #000;
  }
  .a * {
    display: list-item;
    margin-left: 30px;
  }
  .a *::marker {
    content: ">> ";
  }
</style>

CSS 教學 - 元素容顯示類型 ( display ) - display: list-item

display: table-*

table-* 屬性的元素會變成「表格容器的子元素」，使用時會將元素轉換成對應的表格元素顯示類型，下方是對照表：

屬性值 對照元素
table-row tr
table-cell td
table-caption caption
table-header-group thead
table-row-group tbody
table-footer-group tfoot
table-column col
table-column-group colgroup

下方範例會將 class 為 a 的 div 設定為 display: table;，接著把內容子元素設定成表格的子元素顯示類型，呈現和 div 的預設值截然不同的感覺。

線上展示：https://codepen.io/oxxo/pen/MWdVvzw

<!-- HTML 程式碼 -->
<div class="a">
  <span>
    <em>apple</em><em>banana</em><em>orange</em>
  </span>
  <span>
    <em>apple</em><em>banana</em><em>orange</em>
  </span>
</div>
<div>
  <span>
    <em>apple</em><em>banana</em> <em>orange</em>
  </span>
  <span>
    <em>apple</em><em>banana</em><em>orange</em>
  </span>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 10px;
  }
  .a {
    display: table;
    border-collapse: collapse; /* 表格邊緣合併 */
  }
  .a span {
    display: table-row;     /* 等同 tr */
    border: 1px solid #000;
  }
  .a em {
    display: table-cell;     /* 等同 td */
    border: 1px solid #000;
    padding: 10px;
  }
</style>

CSS 教學 - 元素容顯示類型 ( display ) - display: table-*

display: ruby-text

ruby-text 屬性的元素會變成「標記容器的子元素」，使用時會將元素轉換成對應 HTML 的 rt 元素顯示類型，下方範例會將 class 為 a 的 div 設定 display: ruby;，裡頭的 span 設定為 display: ruby-text; ( 等同 rt 元素 )，就能做出上下標著的效果，而另外一個 div 則是採用預設的樣式作為對照組。

線上展示：https://codepen.io/oxxo/pen/zYQWdMK

<!-- HTML 程式碼 -->
<div class="a">
  oxxo<span>apple</span>
  oxxo<span>banana</span>
  oxxo<span>orange</span>
</div>
<div class="a">
  oxxo<span>apple</span>
  oxxo<span>banana</span>
  oxxo<span>orange</span>
</div>
<div>
  oxxo<span>apple</span>
  oxxo<span>banana</span>
  oxxo<span>orange</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    margin: 10px;
    height: 100px;
    border: 1px solid #000;
  }
  .a {
    display: ruby;
  }
  .a span {
    display: ruby-text;
    padding: 0 2px;
  }
</style>

CSS 教學 - 元素容顯示類型 ( display ) - display: ruby

display: contents

contents 屬性的元素「不會產生容器」，HTML 沒有預設 display: contents; 的元素，這個屬性值具有下列的特色：

  • 直接讓子元素呈現自己的 display 屬性。

下方範例將一些元素設定為 display: contents;，可以看出當 div 設定為 contents，裡頭的 span 仍然會保有 inline 的行內容器特性，並不會因為外圍是 div 就強制換行。

線上展示：https://codepen.io/oxxo/pen/qBGoXQj

<!-- HTML 程式碼 -->
<div>
  <span>hello</span>
</div>
<span>oxxo</span>
<div>
  <em>good</em>
</div>
<strong>morning</strong>
<a href="google.com">google</a>

<!-- CSS 程式碼 -->
<style>
  div {display: contents;} 
</style>

CSS 教學 - 元素容顯示類型 ( display ) - display: contents

display: none

none 屬性的元素「關閉顯示元素的容器」，這個屬性值具有下列的特色：

  • 影響子元素：設定 display: none; 的元素與子元素會一起被關閉顯示。
  • 容器消失不佔空間：由於容器已經被關閉，因此會從畫面中消失，且不佔任何空間。

下方範例將一些元素設定為 display: none;，可以看出這些元素就從畫面中消失，因為不佔空間，後方的元素就會替補上來 ( class 為 a 的 div，因為 h3 被設定關閉顯示，所以強制換行效果就消失了 )。

線上展示：https://codepen.io/oxxo/pen/OJYvjaa

<!-- HTML 程式碼 -->
<div class="a">
  <span>apple</span>
  <h3>oxxo</h3>
  <span>banana</span>
</div>
<div>
  <span>apple</span>
  <h3>oxxo</h3>
  <span>banana</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 10px;
  }
  .a h3 {display: none;}  /* 關閉顯示這個元素 */
</style>

CSS 教學 - 元素容顯示類型 ( display ) - display: none

display: inline-*

inline-* 屬性的元素表示「特定行為的行內容器」，使用時會使用行內容器包覆的特定容器，下方是對照表：

屬性值 說明 調整寬高 垂直對齊 水平對齊 強制換行
inline-block 行內容器包覆區塊容器。 O O O X
inline-flex 行內容器包覆彈性容器。 O O O X
inline-grid 行內容器包覆網格容器。 O O O X
inline-table 行內容器包覆表格容器。 O O O X

因為外部是行內容器，所以可以使用 text-align 或 vertical-align 的方式進行水平或垂直對齊，而又因為內部包裹了區塊容器特性的容器，因此也可以調整寬高或採用對應的行為，下方範例列出四種不同特定行為的行內容器。

線上展示：https://codepen.io/oxxo/pen/pomLrqo

<!-- HTML 程式碼 -->
<div class="a">
  <span>aabb</span>
  <h3>oxxo</h3>
  <em>ccdd</em>
  <strong>ggyy</strong>
</div>
<div class="b">
  <span>aabb</span>
  <h3>oxxo</h3>
  <em>ccdd</em>
  <strong>ggyy</strong>
</div>
<div class="c">
  <span>aabb</span>
  <h3>oxxo</h3>
  <em>ccdd</em>
  <strong>ggyy</strong>
</div>
<div class="d">
  <i>
  <span>aabb</span>
  <h3>oxxo</h3>
  </i>
  <i>
  <em>ccdd</em>
  <strong>ggyy</strong>
  </i>
</div>

<!-- CSS 程式碼 -->
<style>
  h3 {margin: 0;}
  div {
    border: 1px solid #000;
    vertical-align: bottom;   /* 垂直對齊底部 */
  }
  .a { display: inline-block;}
  .b { display: inline-flex;}
  .c {
    display: inline-grid;
    grid-template-rows: 30px;              /* 設定網格每一列高度 */
    grid-template-columns: repeat(2,60px); /* 設定網格重複樣式 */
  }
  .d {display: inline-table;}
  .d i {display: table-row;}    /* tr 容器型態 */
  .d i * {display: table-cell;} /* td 容器型態 */
</style>

CSS 教學 - 元素容顯示類型 ( display ) - display: inline-*

小結

display 是一個很常與「排版」有關的樣式屬性，透過改變元素的容器顯示類型，就能讓相同的元素適應不同的版面需求，甚至還會影響各種對齊與尺寸的設定，透過這篇教學的介紹，相信對於 display 能有更深的認識。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

CSS 教學

基本介紹

認識 CSS 開始使用 CSS CSS 語法規則 CSS 命名原則

CSS 選擇器

認識 CSS 選擇器 優先順序 ( 權重 ) 樣式繼承與聯集 元素選擇器 ID 和 Class 選擇器 屬性選擇器 文件結構選擇器 虛擬類別選擇器 ( 結構 ) 虛擬類別選擇器 ( 類型 ) 虛擬類別選擇器 ( 輸入 ) 虛擬類別選擇器 ( 行為 ) 虛擬類別選擇器 ( 超連結 ) 虛擬類別選擇器 ( 邏輯 ) 虛擬類別選擇器 ( 其他 ) 虛擬元素選擇器 群組與組合選擇器

數值與單位

關鍵字與文字數值 長度與角度單位 顏色單位 位置名稱與時間單位

變數與內容函式

變數 數學計算 文字與清單計數 生成內容與引號

顏色與濾鏡

色彩模型 漸層色 影像濾鏡

文字樣式

使用通用字型 使用外部字型 @font-face 定義字型 文字尺寸 常用文字樣式 文字換行 文字空白與 Tab 大小 文字行高與縮排 文字水平與垂直對齊 文字書寫方向 特殊文字樣式

元素容器

容器顯示類型 ( display ) 元素 display 對照表 盒子模型 ( Box Model ) 寬度與高度 內邊距 ( padding ) 外邊界 ( margin ) 邊框 ( border ) 邊框圓角 影像邊框 輪廓 ( outline ) 可見性與透明度 內容溢出與裁切

背景與陰影

背景顏色 背景圖 ( 定位、尺寸 ) 背景圖 ( 固定、重複 ) 背景圖 ( 多重背景、混合 ) 背景縮寫 ( background ) 容器陰影 ( box-shadow )

清單與表格

清單樣式 清單計數器 定義計數規則 表格基本樣式 表格邊框樣式 表格內容寬度與對齊

基本排版與定位

元素排版方式 浮動 ( float ) 浮動形狀 定位 ( position )

Flexbox 彈性排版

Flexbox 彈性盒子 Flexbox 對齊方式 Flexbox 彈性伸縮

Grid 網格排版

Grid 網格容器與格線 Grid 網格空間與命名 Grid 網格流向與間距 Grid 排列網格項目 Grid 項目對齊與順序

轉場與動畫

轉場 ( transition ) 轉場觸發事件 動畫 ( animation ) 動畫觸發事件 多重動畫的權重與順序

變形、裁切與遮罩

裁切路徑 ( clip-path ) 影像遮罩 ( mask )