網頁發展的歷史脈絡

HTML、CSS 相關的網頁開發技術已經發展超過 25 年。隨著大環境的變遷，新技術不斷推陳出新，在此同時，也累積了大量歷史軌跡：許許多多類似、重疊的技術同時存在，造成入門的學習者相當大的混淆和困擾。

技術重疊、混亂的現象在網頁切版的領域中最為明顯，本文將試著釐清發展脈絡，協助入門開發者更快抓住重點。首先，是按照時間，網頁排版技術發展列表如下：

• 最早期使用 HTML 表格做排版
• CSS Float 排版 since 2000
• CSS Inline-Block 排版 since 2008
• CSS Flex 排版 since 2012
• CSS Grid 排版 since 2017

CSS Float 切版技巧

在此，彭彭跳過完全不支援 RWD 的 HTML 表格階段，從目前網頁中，還能看到許多設計師慣用的切版技巧，也就是 CSS Float 開始。這個技巧以 CSS 的 float 屬性為核心，並搭配 clear fix 滿足所有的版面需求。以下是使用 CSS Float 的相關設定：

• 核心 float: left|right
• 修正 clear: both|left|right

CSS Inline-Block 切版技巧

此技巧以 CSS 的 display 設定為核心，綜合 block 與 inline 模式的優點，再搭配 text-align 以及 vertical-align 處理上下、以及左右對齊的需求。以下是使用 CSS Inline-Block 的相關設定：

• 核心 display: inline-block
• 左右對齊 text-align: left|center|right
• 上下對齊 vertical-align: top|middle|bottom

CSS Flex 切版技巧

CSS Flex 可以說是近年最成熟且被廣泛運用的技巧。圍繞著 display 和 flex 的設定，改善 Inline-Block 在上下、左右對齊設定上的缺陷，提供專屬、整套的解決方案如下：

• 核心 display: flex
• 核心 flex: none|auto
• 左右對齊 justify-content: flex-start|center|flex-end
• 上下對齊 align-items: flex-start|center|flex-end

CSS Grid 切版技巧

最新、剛出爐的技術正是這個 Grid，相較於 Flex 提供單一向度的排版工具，Grid 進一步提供二維、概念類似表格的切版能力，並保有完整的設計彈性。核心設定列表如下：

• 核心 display: grid
• 核心 grid-template: 格線切割設定
• 左右對齊 justify-items, align-items
• 上下對齊 grid-column, grid-row

學習的關鍵

新手學習切版的時候，通常會大量的參考別人寫的範例或文件，由於解法都不太一樣，很快的就產生混亂。解決混亂的關鍵，在於你必須意會到每一份教學，是採用了哪一種排版技巧，並把專注力放在相關的設定上，通常就迎刃而解。