顯示模式是什麼？

每一個 HTML 標籤，都帶有一個顯示模式的設定。透過 CSS，可以用 display 屬性來做調整。這個設定對於標籤的呈現方式、版面特性有極為關鍵的影響。

例如：
<div> 的預設模式為 block、<span> 的預設模式為 inline。或者透過 CSS 任意調整如下：

<div style="display:inline">標籤的顯示模式設定為 inline</div>
<span style="display:block">標籤的顯示模式設定為 block</span>
<nav style="display:none">標籤的顯示模式設定為 none (隱藏)</nav>

詳解 block 模式

設定為 block 模式的標籤最常用來做主要的區塊切版，例如標頭、頁尾、主內容、列表等等，具備以下特性：

• 強迫換行 (Break Line)
• 承上，除非有特別設定，否則無法水平並排
• 可以用 CSS 控制寬度與高度

詳解 inline 模式

設定為 inline 模式的標籤主要用來做區塊內部的細節、功能處理，例如超連結、嵌入影像、文字樣式設計，具備以下特性：

• 不會強迫換行
• 承上，可以水平並排
• 寬高以標籤中的內容為依據，不可任意控制

更多常用模式

block 和 inline 是兩種主要的、基本的顯示模式，其他模式多由基本的模式延伸，或是結合而成。簡介如下：

• inline-block：切版的重要工具，結合兩者特性，一不會強迫換行，二可以設定寬高尺寸
• flex 和 inline-flex：使用 flex 技巧排版，並分別對應 block 和 inline 特性
• grid 和 inline-grid：使用 grid 技巧排版，並分別對應 block 和 inline 特性

排版的核心觀念

網頁排版，首重了解標籤的顯示模式特性，盡量配合原始特性做處理。如大禹治水，順著自然而行是最好的解答。若對於更多的網頁切版技巧有興趣，建議參考網頁前端課程來進行學習。