「誰掌握了過去，誰就掌握了未來」 ——《1984》

既然主題和切版有關，當然要來簡單了解一下切版（黑）歷史啊 XD，認識過去的排版思維以及排版的進展（還有痛苦的切版方式？），相信對於在切版上所想要解決的問題會有更多的了解（說不定就能掌握未來成為大大？）

切版簡史

HTML部分

1. 陳述式 HTML 標籤 / 像素GIF

大約於 1990 年，由 Tim Berners-Lee 提出了第一個 HTML 規範，並編寫了第一個 Web 服務器規範（HTTP）和 Web 瀏覽器，開始了網路普及的時代。那時還只有 HTML tag 可以做樣式的變化，如 <b>、<i>、<font color="blue"> 等。

這時的 HTML tag 裡又混著樣式，不但混亂難以維護，也沒有尺寸排版的方法，這些標籤的目的也大多只是拿來表達結構而不是用來做樣式。

那時便衍生出利用透明的 gif 及像素尺寸來設定空白區域。

<img src="single.gif" width="150">
<!-- 中間空 150 px 的意思 -->

2. <table></table>

約於 1996 年 table 開始普及，排版的方式能做到像是數據表、報章雜誌，這是在 flexbox 和 grid 出現之前唯一讓元素尺寸可以建立關聯的方式（如制定相同的寬高、共享邊界）。

然而使用 table 這樣表格式的排版有許多的限制，除了程式碼複雜外，還難以對表格做維護，缺乏修改的彈性，難以做複雜的排版。不過現在的 email 裡大多還是使用這種 table 排版，因為 email 支援度低，還只能寫 inline css。（現在有 MJML，可以不用痛苦手刻 inline css，還可以做到 RWD）。

3. 圖像映射（Imagemaps）<map>

利用網頁座標位置距離及尺寸來創造圖像，整個頁面都將由圖像來配置，常利用於簡單的地圖設計，然而整個圖像所需的載入時間較長，而且也難以做修改。

<map name="food_map">
    <area href="https://www.google.com.tw" title="Example" shape="rect" coords="286,480,346,493">
</map>

4. <frameset>

出現於 HTML 4.1 的 html 標籤，類似於 table 並且以控制外框尺寸來排版，然而效果不佳且問題也多，現在已經無法使用。

<frameset cols="30%,*">
  <frame src="frame1.html" />
  <frame src="frame2.html" />
</frameset>

CSS 部分

5. position 相關屬性 / block 及 inline

於 1994 年由 Hakon Wium Lie 提出 CSS，將結構和樣式的表達分離，並由 W3C 於 1996 年發布 CSS（CSS1）第一條規範建議。

而後於 1998 年發布了 CSS Level 2 (CSS2)，內容新增了 position 做定位和 z-index 來設置重疊順序，block 和 inline 的概念也在這時候出現。

6. <div> 和 CSS box model

div (division：分離) 出現於 HTML 3.2，目的在於配合 box model 的概念來達到元件"分離"，而 box model 常見的如 border、margin、padding、box-sizing，可以輕易地控制元件之間的分離間距。

7. float 屬性

約出現於 2000 年，float 可以讓被選到的東西"漂浮"，達到如 inline 的特性，可以搭配 clear 屬性來完成獨特的文繞圖排版方式。

雖然在某些情境下適合用 float 來做出很棒的文繞圖效果，然而 float 的目的顯然並不是為了排版而生，將他用於複雜的排版可能就會像是 table 一樣的糟糕（糟糕是書裡說的 XD，不要打我）。

8. display: inline-block;

約出現於 2008 年，同時具有 inline 的並排特性和 block 可以設定高寬的特性，並且時常搭配 text-align 來左右對齊、vertical-align 和 line-height 來達到上下對齊等效果。

但 inline-block 因為 inline 的特性，在原始碼中連 "編輯器空白部分" 都會被解析成間距（謎之4px），為了解決這個問題也發展出了許多奇技淫巧。

奇技淫巧可以參考：如何解決inline-block元素的空白間距

9. 媒體查詢 @media

約出現於 2012 年，是 RWD (Responsive web design) 響應式網站的技術，媒體查詢是一段 CSS 代碼，用來分辨頁面的解析度(dpi 或 dpcm）或尺寸，根據分辨結果來提供不同的屬性設定。

@media only screen and (min-width: 768px) {
  p {
    font-size: 12px;
  }
}
這樣就只有小於 768px 的螢幕尺寸會讓 p 的字型大小是 1.2px

10. display: flex;

約出現於 2012 年，是近年最成熟且流行的排版方式，改善 inline-box 的對齊設定缺陷，並且有多個屬性可以設定，常用的屬性如 justify-content 和 align-items 就可以輕鬆控制"一維"、"上下"和"左右"來達到置中的效果，非常適合用於導覽列，並且可以說幾乎能完成現今大部分的排版，也適合用於 RWD 響應式網站網頁。

然而也是因為 RWD 響應式網站的流行，在電腦和手機的排版設計日益複雜，差異過大（如不同裝置還要做各種前後順序的大調換）還是有可能造成 flexbox 的排版困難。你還是可以使用 javascript 或 非常多的巢狀 flexbox 和 order 來完成這種複雜的排版（然後心裡暗念設計師或客戶這樣），或是考慮使用 AWD (Adaptive web design) 來分成各個尺寸的頁面撰寫，但這些方法可能就增加了 code 維護上的困難度。

關於 RWD 和 AWD 可以參考：不會寫CSS也能懂！如何選擇RWD或是AWD？

11. display: grid;

約出現於 2017 年，算是比較新的、以排版為目的而生的技術，相較於 flexbox 一維、上下和左右的調控觀念，grid 更強調"二維"、表格式的"行"與"列"，這讓它能夠完成更靈活的 RWD 排版，但卻又比 table 彈性許多，他同樣和 flexbox 有許多屬性可以使用，如（grid-template 相關屬性）操控網格線 grid line，並將元素和網格線產生對齊關係。常用的還有左右對齊的 justify-items、align-items 和上下對齊的 grid-column, grid-row。

然而完全使用 grid 並不一定是最好的，有時候只是想做個簡單排列，明明用 float、inline-block、甚至 flex 就可以快速完成，使用 grid 就顯得有點多此一舉，程式碼也比較複雜一點，而且 grid 也不是萬能，據說還是有些坑啦˙。

結論

以現在流行的開發方式來說，在開始開發前，我們可以先考慮整體的網頁佈局比較適合使用一維式的 flex ，還是二維式的 grid，同時併用 "各種切版武器" 來完成其他大部分的排版架構。相信在不同的情況下，我們仍會需要使用不同的切版方式或屬性來達成各種排版及組件，因為每個屬性都有其適合應用的地方，不一定用哪種方式就是最好的。妥善利用各種特性，找到適合專案的排版方式才是最佳解。

資料來源：

• A brief history of HTML/CSS layouting

• CSS 切版技巧總攬

• CSS 大全第四版

• HTML Tags: Past, Present, Proposed