本文來自作者?大漠?在?GitChat?上分享 「聊聊 CSS 中的布局模式」，「閱讀原文」查看交流實錄。

「文末高能」

編輯 | 哈比

一、聊聊 CSS 中的布局模式

在大家的印象中，CSS 非常的簡單，在此我想再強調一下，雖然 CSS 簡單，但并不代表容易。隨著 Web 技術的發展飛快，CSS 經過二十多年的發展，其變化也是非常的大。

CSS 涵蓋的技術點也非常的多，其中的每一個點都足夠我們發很多的時間去探討。今天我們就一起來聊聊 CSS 中的布局模式，因為在任何的 Web 網站和 Web 應用都離不開布局。

對于眾多的布局模式，我們應該怎樣給 Web 產品選擇最適合的布局模式呢？希望這篇文章對大家了解或者給 Web 產品選擇布局模式有所幫助。

二、Web 的演化路程

在互聯網的演化過程中，Web 網站（網頁制作）是 Web 1.0 時代的產物，那時網站的主要內容都是靜態的，用戶使用網站的行為也以瀏覽為主。

隨著網頁從學術機構走向公眾社會，網頁承載的功能便超出了學術范圍而變得愈加豐富，因此早期網頁的局限性也逐漸顯露出來。

2005 年以后，互聯網進入了 Web 2.0 時代，各種類似桌面軟件的 Web 應用大量涌現，網站的前端也由此發生了翻天覆地的變化。

網頁也不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟件化的交互形式為用戶提供了更多好的使用體驗，這些都是基于前端技術實現。

技術發展日新月異，現在業內人員開始提出 Web 3.0 的概念。

最常見的解釋是，網站內的信息可以直接和其他網站相關信息進行交互，能通過第三方信息平臺同時對多家網站的信息進行使用；用戶在互聯網上擁有自己的數據，并能在不同網站上使用；完全基于 Web，用瀏覽器即可實現復雜系統程序才能實現的系統功有；用戶數據審計之后，同步于網絡數據。

Web 的整個演化走過了 Web1.0 和 2.0，即將迎接 Web3.0（或者說 Web 3.0 已經到來了），在每個過程都有相應的產物出來，比如下圖所示：

上圖來自于 evolutionoftheweb.com。這個網站演示了整個網絡的演進過程以及演進過程中相應產生的產物。感興趣的可以至 http://www.evolutionoftheweb.com/?hl=zh-tw 詳細了解。

上面的網站只演示到 2012 年，與當今相比，已有近六年的差距，但對于 Web 的前面發展史還是足以幫助我們進行 Web 發展的進程。

今后的發展，將會是 Web 4.0 的世界，智能化機械、生物科技等，可能正如電影 Matrix 所言，做成 “天網” 的電腦智能系統，希望電腦不會控制人類。

扯了這么多，簡單的歸納一下 Web（說互聯網技術更為準確）的演變的歷史大致如下：

• 1990~2000 年，Web 1.0（Web，網作用：連接知識）：主要包括網頁搜索引擎、網站、數據庫、文件服務器等；

• 2000~2010 年，Web 2.0（Scocial Web，社會網作用：連接知識）：引入了社區、RSS、Wiki、社會化書簽、社會化網絡等概念；

• 2005~2020 年，Web 3.0（Sementic Web, 語義網作用：連接知識）：由本體、語義查詢、人工智能、智能代理、知識結點、語義知識管理等構成；

• 2015~2030 年，Web 4.0（Ubiquitous，無所不在的網作用：連接情報）：具體內容還不大清楚，我想 Web 4.0 的含義關鍵在于它在任何時候，任何地方能夠提供給你任何需要的東西。

用下圖來展示 Web 每個階段的發展歷程：

三、布局演變史

通過前面的內容，或許你對 Web 的發展歷史有了一定的了解。可以說整個 Web 在不斷的演進，那么為 Web 服務的理念與技術等等也在不斷的進行演化。

而我們今天要要聊的話題是 Web 布局（Web 網站或 Web 應用程序的布局），它也在 Web 不同的演化過程也有相應的演進。接下來就回到我們今天要聊的主題當中。

在 Web 布局整個演進過程當中，經歷了沒有任何布局、表格布局、定位布局、浮動布局、Flexbox 布局等布局模式。

除了這些我們常看到的布局之外，即將還會有 Grid、Shapes（類似雜志不規則布局）這些現代的布局模式。這些布局模式從側面也反映出其自身是 Web 演進過程中的一種產物，都承載了自己在當時那個時期的史命。

用 @Jen Simmons 的一張圖來表達，更為貼切一些：

對于布局，我們還可以按類型和功能來進行分類。先來看按類型分類的布局模式：

• 無任何布局模式；

• 表格布布局模式；

• 浮動布局模式；

• 定位布局模式；

• 多列布局模式；

• Flexbox 布局模式；

• Grid 布局模式；

• 不規則布局模式；

另外除了類型分類，還可以按功能模式來分類：

• 靜態布局（Static Layout）；

• 流式布局（Liquid Layout）；

• 自適應布局（Adaptive Layout）；

• 響應式布局（Responsive Layout）。

接下來簡單的看看每種布局的模式承載的史命。

1. 無任何布局模式

歷史上最早的一個網頁是 1990 年 12 月 20 日，歐洲核子研究組織（CERN）的科學家家蒂姆 . 伯納斯 . 李在瑞士的研究中心創建的，最初僅為 CERN 內部的科學家所使用。

在這個階段，網站的內容主要是文字內容和圖片為主，制作方法非常的簡易。比如萬維網（WWW），歐洲核子研究組織的一幫科學家為了方便看文檔，傳論文而創造的。

這個時候的 Web 網頁主要是基于 Document。Document 就是用標記語言加上超鏈接寫成的由文字和圖片構成的 HTML 頁面，這樣的功能已經完全能滿足學術交流的需要，所以網頁的早期形態和 Document 一樣，完全基于 HTML 頁面，并且所有內容都是靜態的。如下圖：

2. 表格布局模式

很長的一段時間，，多頁就只有文字信息和圖片組成，而且只是為了查看內容。為了讓頁面好看一點，主要裝飾還是依賴于 HTML 自帶的標簽的屬性。

隨著 Web 技術的發展，HTML 也越來越成熟。而 Web 呈現給用戶的不僅僅是文字瀏覽，網絡制作者希望制作出來的頁面能更適合用戶的瀏覽，或者想讓其能像 Word 這樣的排版軟件制作出來的文檔。

這個時候很多網頁開始依賴 HTML 的表格標簽來對 Web 進行布局。在那個時候喜歡使用可視化軟件來直接制作網頁，比如 FrontPage、DW 這樣的。

下圖就是 DW 制作網頁的一個簡易圖：

比如 2005 年的淘寶頁面，就是用表格制作的，如下圖所示：

也可以說表格的布局是 Web 早期 CSS 不存在的時候興趣的，是對table標簽不正規使用（它是表格標簽），天生就是用來顯示數據的，而不是用來給網頁布局的。

W3C 說，表格可以用來容納文字、圖片、鏈接、表單以及表格等。

但表格不應該單純用來做網頁布局，理由是，當 Web 被非可視化設備渲染的時候，表格會出問題，他們指定是屏幕閱讀器以及盲文瀏覽器。

另外，表格在大型顯示設備上會強迫用戶左右滾動。雖然 W3C 說不建議用表格來布局，特別是在 CSS 出現之后，更是被人嫌棄，事實上對表格的責難主要有：

• 代碼臃腫；

• 頁面渲染性能問題；

• 不利于搜索引擎優化；

• 可訪問性差；

• 不夠語義。

事實上，表格也并不是一無是處，他也有自己的優點：

• 可觀性好，當用戶插入一個表格的時候就可以立即看到效果；

• 簡單方便，適合初入門的用戶操作；

• 可讀性好，稍微懂一點 HTML 的同學就能看懂。

特別是 CSS 越來越成熟的時候，表格對于布局而言已經退出了歷史的舞臺，但并不是說<table>標簽就再也不使用了。

前面也說過了，<table>表生就是用來顯示數據的，所以不管什么時候，表格用來顯示數據還是最佳的一種方式。

如果你追求完美，又不想使用表格的顯示數據，那也不要緊，你可以使用table和table-cell來模擬表格的布局模式。比如：

<table> ? ? ? ? ? ? ? ? ? ? //display:table;<thead> ? ? ? ? ? ? ? ? //display:table-header-group;<tr> ? ? ? ? ? ? ? ?//display:table-row;<td>1</td> ? ? ?//display:table-cell;<td>2</td><tr></thead><tbody> ? ? ? ? ? ? ? ? //display:table-row-group;<tr><td>3</td><td>4</td><tr></tbody> </table> ? ?

特別是在移動端，如果你想對底部的工具欄有一個等分列的布局效果，使用display:table和display:table-cell將也是種完美的方案。只不過你需要添加width: 100%和table-layout:fixed。

3. 定位布局

隨著 CSS 的強大和 HTML 更多元素標簽的出現，布局不在局限于表格。而對于后端或者說早期的前端人員（網頁設計師），常采用的布局是 CSS 中的position各屬性（fixed、absolute等）來布局。

這種方式的布局能讓你快速達到想要的布局效果。當然也有很多同學直接嘗試采用 PSD2HTML 這樣的類似工具，直接將設計圖轉換成 Web 頁面。

雖然這種方式能快速實現 Web 的布局效果，但也受到很多的局限性：

• 需要明確指定元素的大小；

• 需要明確計算元素位置坐標；

• 難于維護。

或許其中還有很多其他不利的因素。因此，這樣的布局也并算是一種好的布局模式，但對于不太懂 CSS 的同學而言，這是一種簡單易懂的布局。

在實際布局當中，模態彈出框和固定頁頭，頁腳有常見定位布局的身影，特別是水平垂直居中：

.center {width: 300px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) }

如果你使用 PSD2HTML 這樣的工具轉換出來的頁面（特別早期的 Photoshop 或者 Firework 制圖軟件切片導出的頁面），基本上都是使用定位布局。

4. 浮動布局

其實 CSS 中的浮動布局，它的初衷并不是用來布局的，而是用來處理文本的一種排版方式。但是廣大的 CSSer 發揮其無窮的智慧，硬是將其用于 Web 的布局中。

這種布局方式成為一種主流的布局方式，并且持續了很多年。直到 Flexbox 布局的出現和移動端的興起，浮動布局才慢慢的被其取替。

特別是在 2004 年傅捷、王宗義和祝軍翻譯了美國塞爾達曼（Zeldman J.）的著作《網站重構》一書。

這本書受到廣大 Web 愛好者的青瞇，可以說讓國內整個前端行業（那時候還沒有前端這樣的職位）發生了很大的一個變化。我記得那時候，淘寶 UED 說：“我們要做地球上最優秀的前端”。

這本書稱得上是給整個行業帶來了革命性的變化，而就這場革命也造就了 “21 世界最大的 IT 冤案”。為什么說是 21 世界最大的 IT 冤案呢？

只要 2004 年以后看了這本書的同學，只要看到 Web 頁面源碼中有table標簽，就會說這個不行，寫這個頁面的人不專業，頁面也是垃圾，不符合 W3C 規范。

其實這本書從來也沒有說網頁出現table標簽就是垃圾網頁，就是不符合 W3C 標準的頁面。

除了造成 21 世紀最大的 IT 冤案之外，還有災難性的 DIV+CSS 的泛濫。出現最多的詞就是div，大家覺得我會div，我就很高大上。

而且整個頁面下來，除了div，就是div。什么p標簽、span標簽基本上是找不到。這個時候就是div的泛濫，根本也沒有什么語義化，可讀性一說。

感覺有點跑題了，還是回到正題中來。在使用浮動布局這些年當中，從中還演變出來很多布局方式，比如后面要聊的靜態布局、流式布局、自適應布局和響應式布局等。

在 CSS 的布局模式當中，浮動布局經歷的時期是最長的，持續了十多年的歷史。在這個時期也演變出很多經典的布局。

其中要屬 “圣杯” 和 “雙飛翼” 兩者最為經典。這兩種方法實現的都是三欄布局，兩邊的固定寬度，中間自適應，它們實現的效果是一樣的，差別只是實現的思想。

圣杯布局

圣杯布局：左、中、右。中間的寬度為100%，獨占一行。使用負邊距（margin-left）把左右兩列拉到和中間列同一行。

• 左列使用margin-left:-100%；

• 右例使用margin-left: -右列寬度；

同時左、中、右三列的容器設置左右padding來給左右兩列留下相應寬度（左、右列寬度）。

<!-- 圣杯的 HTML 結構 --> <div class="container"><!-- 中間的 div 必須寫在最前面 --><div class="middle"> 中間彈性區 </div><div class="left"> 左邊欄 </div><div class="right"> 右邊欄 </div> </div>/*CSS*/ .container {width: 480px;margin: 20px auto;padding-left: 240px;padding-right: 240px;overflow: hidden;border: 1px solid red; }.middle {width: 100%;background: green;float: left; }.left {margin-left: -100%;width: 220px;background: orange;position: relative;float: left;left: -240px; }.right {margin-left: -220px;width: 220px;background: yellow;position: relative;right: -240px;float: left; }

雙飛翼布局

雙飛翼布局和圣杯布局類似，也是左，中，右三列，中列里面會再套一個容器。

• 中列寬度設置為100%；

• 使用負邊距margin-left把左右兩列拉到和中列同一行；

• 在中列內的容器div設置margin-left和margin-right給左右兩列留下對應的空間。

實現代碼也很簡單：

<!-- 雙飛翼的 HTML 結構 --> <div class="container"><!-- 中間的 div 必須寫在最前面 --><div class="middle"><div class="middle-inner"> 中間彈性區 </div></div><div class="left"> 左邊欄 </div><div class="right"> 右邊欄 </div> </div>/*CSS*/ .container {width: 960px;margin: 20px auto;overflow: hidden; } .middle {float: left;width: 100%; } .middle-inner {margin: 0 240px; /* 留出距離 */background-color: yellow; } .left {float: left;width: 220px;margin-left: -100%;background-color: red; } .right {float: left;width: 220px;margin-left: -220px;background-color: green; }

圣杯布局和雙飛翼布局解決的問題是一樣的，都是兩邊定寬，中間自適應的三欄布局，中間欄要在放在文檔流前面以優先渲染。

這樣做主要是因為早年的網絡和設備沒有現在這么優秀，為了讓主要的內容先向用戶呈現，所以很多時候都使用這兩種布局方式。

甚至可以說，現在很多人都還在使用這兩種布局方式。但如果你繼續閱讀后面的內容之后，你會慢慢放棄浮動布局。

雖然在布局的歷史中，他承載了相當長的一段時間的使命，但有更好的，更適合的方式，我們應該要學會選擇與放棄。

5. 多列布局

這里要說的多列布局，并不是前面的布局模式產生的多列模式。而是 CSS 的 Multi-column 布局模塊。

你可能想得到，這個模塊給予了我們脫離position和float這些屬性，就能在網頁上實現多列布局的能力。

同樣，根據容器的大小，就可以控制創建欄目的數量，這是非常了不起的一個特點。Multi-column 對應的 CSS 屬性還具有以下一些功能：

• 定義欄目的最大寬度；

• 定義在多欄目之間的間距；

• 在多個欄目中平均分配好顯示的內容。

Multi-column 好就好在能夠自動為你安排好流體內容，你用不著計算確定欄目的數量，讓他們排排站好就行了。

這種布局，就算是在現在，使用的人也不多，必須像報紙這樣的多列布局的風格并不多，但借助他的特性，我們可以實現一些特殊的布局風格。比如瀑布流的布局：

由于代碼過多，就不在這里列出了，如果對代碼感興趣的話，可以至?https://codepen.io/airen/full/ybyvEM/ 查看。具體實現的步驟，可以閱讀《純 CSS 實現瀑布流布局》一文。

除此之外，多列布局還常用于下圖這樣的布局風格：

6. Flexbox 布局

Flexbox 是 CSS 的一個新特性，這個新特性解決我們以前在 CSS 中很多麻煩問題，比如說內容的伸縮與擴展、垂直居中、等分列、等高列等等。

當然，這個屬性也大量的運用于布局當中，特別是在面對品種繁多的移動端的局面下，Flexbox 用于布局的優勢也顯現的更為強大。從而慢慢的用來取代了 CSS 中的浮動布局。

使用 Flexbox 來布局，現在隨處可見。比如 @Zoe Gillenwater 整理的相關教程和資料（https://goo.gl/mB61yM）。里面有很多關于 Flexbox 的內容。這里我放幾張圖來演示 Flexbox 實現布局是多么的簡單和靈活。

時到今日，使用 Flexbox 的場景也越來越多，在將來使用 Flexbox 場景將會更多（https://www.w3cplus.com/blog/tags/157.html）。

7. 網格布局

前面說過早期的 Web 頁面僅僅是用來展示文本信息和圖片。但對于現在的 Web 頁面，不僅僅是這樣了。

隨著這么多年的發展。現在大量的網頁設計都是基于網格布局。雖然人們通常注意不到它，但事實上雜亂無章的布局時代確實已經過去了，現在是整齊結構化的天下。

無論從理論、美學和整齊來說，這樣的布局都很好平衡。網格結構是所有現代網站的基礎，它總能級最終用戶完美無暇的設計。

對于網格系統而言，它也經歷了一個漫長的演變。表格布局雖然痛苦，但可以說表格是網格系統布局的最初模型。

正因為有表格布局的存在，才有了后面的 CSS 網格系統，不管是早期基于浮動完成的網格系統，還是后期依賴于 Flexbox 完成的網格系統。當然，你可有會說，網格系統的鼻祖不是 960gs（http://960.gs/）？

雖然 960gs 是最早出現的網格系統（基于浮動布局），但其網格的思路是來源于表格的。因為表格具有明顯的柵格風格，只不過是使用其它的布局模式，快速模擬了表格的風格，甚至是嵌套表格的網格。

加上網格系統讓 Web 的設計變得結構整齊、布局平衡等。受到眾多設計師的青瞇，也讓擼碼的同學更易實現，并且可以依據此思路制定一套系統，比如很多 CSS 的 Framework 都有類似的網格系統布局（不管是浮動還是 Flexbox 實現的）。

不管怎么說，這些網格系統可以達到較好的效果，甚至還可以基于此系統制作工具，通過工具幫助大家快速完成布局。

前面我們說了很多種 Web 的布局模式，但這些布局模式都局限于單維（一維）方向。但對于現代 Web 頁面的布局，很多時候我們需要的不僅僅是單維的布局，希望在兩個維度都能更好的控制我們的布局。

比如下面這樣的一種布局：

前面介紹的每種布局模式都可以實現上圖這樣的布局效果，但要實現具有可擴展性，并且自適應強的并不容易實現。

歸根究底，前面的這些方法都是單維控制的，只能控制一個方向，對于另一個方向就不好控制了。

不過，值得慶幸的是。CSS 推出的 CSS Grid 布局模塊，可以很好的解決這個問題。因為 CSS Grid 布局打破了以前所有布局方式的維度，它是一個雙維度的布局模塊。

它除了可以靈活的控制水平方向之外，還能輕易的控制垂直方向的布局模式。對于上圖那樣的九宮格布局，它就可以輕而易舉的完成。

可以說，CSS Grid 布局才是 Web 中的布局模塊，隨著瀏覽器對其支持度越來越強的情況下，它將更會受到青瞇。也將成為未來 Web 布局中的霸主。

特別是將 CSS Grid 布局和 Flexbox 布局兩種模式結合在一起，那對于布局言就不會有什么難事。比如下圖這樣的布局：

8. 不規則布局

我們常看到的 Web 布局一般都是遵循按行和列等線性原則，Web 網站的布局到今天為止很大程度上受到這些原則的影響。

雖然 CSS Grid 的出現讓布局變得更好，更靈活，但相對于印刷媒體而言，Web 布局總體上還是受到很多的限制，特別是內容流上。

雜志和報紙一直有很好的辦法來安排內容。比如文本繞著非矩形排列。

而 CSS 的 Shapes 模塊（https://drafts.csswg.org/css-shapes/）?讓 Web 布局能像雜志和報紙一樣讓文本內容實現不規則矩形排列。

CSS Shapes 使網頁設計師能更好的實現自己的創意，除了簡單的長方形和正方形，還可以實現任何幾何圖形布局。

掃描下方二維碼，閱讀完整原文

總結

以上是生活随笔為你收集整理的聊聊 CSS 中的布局模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。