CSS專家、阿里巴巴前端技術專家大漠：縱覽佈局演變史

　　最近有一個關於CSS的話題“既然寫CSS很容易，那為什麼大家還是把CSS寫的那麼爛呢？”。對於這樣的話題，大家或許覺得沒有什麼，頂多也就是各種槽點。但事實上，在天朝CSS很多時候是不被看好，相比國外的同行，很少有人在專研CSS領域。這也造成，能寫好CSS的同學不多，甚至說越來越少。

 

　Web的演化路程

　　在網際網路的演化過程中，網頁製作是Web1.0時代的產物，那時網站的主要內容都是靜態的，使用者使用網站的行為也以瀏覽為主。在這個階段，網站的內容主要是文字內容和圖片為主，製作方法也主要使用表格拼裝為主。印象中，那時候網頁三劍客非常出名，畫個表格，往裡填充圖片，文字，就叫網頁了。

　　2005年以後，網際網路進入了Web2.0時代，各種類似桌面軟體的Web應用大量湧現，網站的前端也由此發生了翻天覆地的變化。網頁也不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟體化的互動形式為使用者提供了更多好的使用體驗，這些都是基於前端技術實現。

　　技術發展是日新月異，現在業內人員開始提出Web3.0的概念。最常見的解釋是，網站內的資訊可以直接和其他網站相關資訊進行互動，能通過第三方資訊平臺同時對多家網站的資訊進行整使用；使用者在網際網路上擁有自己的資料，並能在不同網站上使用；完全基於Web，用瀏覽器即可實現複雜系統程式才能實現的系統功能；使用者資料審計之後，同步於網路資料。

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

　　上圖的錄頻來自於evolutionoftheweb.com。這個網站演示了整個網路的演進過程以及演進過程中相應產生的產物。感興趣的可以點選這裡詳細瞭解。

　佈局演變史

　　整個Web在不斷的演進，那麼為Web服務的理念與技術等等也在不斷的進行演化。那麼我們今天要聊的話題，Web佈局，它也在Web不同的演化過程也有相應的演進。接下來就回到我們今天要聊的主題當中。

　　在Web佈局整個演進過程當中，經歷了表格佈局、定位佈局、浮動佈局、Flexbox佈局等佈局模式。除了這些我們常看到的佈局之外，即將還會有Grid、Shapes、Regions這些現代的佈局模式。這些佈局模式從側面也反映出其自身是Web演進過程中的一種產物，都承載了自己在當時那個時期的史命。

　　表格佈局

　　歷史上最早的一個網頁是1990年12月20日，歐洲核子研究組織（CERN）的科學家蒂姆.伯納斯.李在瑞士的研究中心建立的，最初僅為CERN內部的科學家所使用。直到1991年8月份才對外開放。傳說中這個頁面張得像下面這樣的截圖：

　　其實很長的一段時間，網頁就只有文字資訊和圖片組成。為了讓頁面好看一點，主要裝飾還是依賴於HTML自帶標籤的屬性，而當時的主要佈局還是主要依賴於HTML中的table來實現。在那個時候都喜歡使用視覺化軟體來直接製作，比如FrontPage、DW這樣的。

　　定位佈局

　　隨著CSS的強大和HTML更多元素標籤的出現，佈局不在侷限於table。而對於後端或者說早期的前端人員（網頁設計師），常採用的佈局是採用CSS中的position各屬性（fixed、absolute等）來佈局。這種方式的佈局能讓更快速達到想要的佈局效果。當然也有很多同學直接嘗試採用PSD2HTML這樣的類似工具，直接將設計圖轉換成Web頁面。雖然這種方式能快速實現Web的佈局效果，但也受到很多的侷限性：

• 需要明確指定元素的大小
• 需要明確計算元素位置座標
• 難於維護

　　或許其中還有很多其他不利的因素。因此，這樣的佈局也並不算一種好的佈局方式，但對於不懂CSS的同學而言，它是一種簡單易懂的佈局。

　　浮動佈局

　　其實CSS中的浮動，它的初衷並不是用來佈局的，而是用來處理文字的一種排版方式。但是廣大的CSSer發揮其無窮的智慧，硬是將其用於Web的佈局當中，而且這種佈局方式成為一種主流的佈局方式，並且持續了很多年。直到Flexbox佈局的出現和移動端的興起，浮動佈局才慢慢的被其取替。

　　在使用浮動佈局這些年當中，從中還演變出來很多種佈局方式，比如說，固定佈局、流式佈局（液體佈局）、自適應佈局和響應式佈局等。

　　Flexbox佈局

　　Flexbox是CSS3中一個新特性，這個特性解決我們以前在CSS中很多麻煩問題，比如說內容的伸縮與擴充套件、垂直居中、等分等等。當然，這個屬性也大量的運用於佈局當中，特別是在而對品種繁多的移動終端的局面下，Flexbox用於佈局的優勢也顯現的更為強大。從而慢慢的用來取代了CSS中的浮動佈局。

　網格系統

　　前面說過早期的Web頁面僅僅是用來展示文字資訊和圖片。但對於現在的Web頁面，不僅僅是這樣了。隨著這麼多年的發展。現在大量的網頁設計都是基於網格佈局。雖然人們通常注意不到它，但事實上雜亂無章的佈局時代確實已經過去了，現在是整齊結構化的天下。無論從理論、美學和整齊來說，這樣的佈局都很好平衡。網格結構是所有現代網站的基礎，它總能給終端使用者完美無暇的設計。

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

　　正因為有表格佈局的存在，才有了後面的CSS網格系統，不管是早期基於浮動完成的網格系統，還是後期依賴於Flexbox完成的網格系統。當然，你可能會說，網格系統的鼻祖不是960gs？

　　雖然960gs是最早出現的網格系統（基於浮動佈局），但其網格的思路是來源於表格的。因為表格具有明顯的柵格風格，只不過是使用其它的佈局方式，快速模擬了表格的風格，甚至是巢狀表格的風格。加上網格系統讓Web的設計變得結構整齊、佈局平衡等。受到眾多設計師的青眯，也讓Coding的同學更易實現，並且可以依據此思路制定一套系統。基於此係統，可以快速完成佈局，並且達到較好的效果，甚至還可以基於此係統制作工作，通過工具幫助大家快速完成佈局。

　真正的網格佈局

　　上面說了很多種佈局方式，但這些佈局都侷限於單維方向。但對於現代Web頁面的佈局，很多時候我們需要的不僅僅是單維佈局，希望在兩個維度都能更好的控制我們的佈局。比如下面這樣的一種佈局。

　　前面介紹的每一種方法都可以實現上圖這樣的佈局效果，但要實現具有可擴充套件性，並且自適應性強的並不容易實現。歸根究底，前面的這些方法都是單維控制的，只能控制一個方向，對於另一個方向就不好控制了。

　　不過，值得慶幸的是。CSS推出的CSS Grid 佈局模組，可以很好的解決這個問題。因為CSS Grid佈局打破了以前所有佈局方式的維度，它是一個雙維度的佈局模組。它除了可以靈活的控制水平方向之外，還能輕易的控制垂直方向的佈局模式。對於上圖那樣的九宮格佈局，它就可以輕而易舉的完成。

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

　總結

　　歷史是不斷向前的，技術也是如此。雖然CSS在眾多同學眼裡是一件輕鬆的事情，但事實並非如此。正如此文所介紹的CSS實現Web佈局，這就不是一件輕鬆的事情，很多工作兩三年的同學，都不一定能對Web佈局實現達到手到擒來。除此之外，在未來，Web佈局的模式將會越來越多，越來越強大，比如不久的將來，CSS Shapes能幫助我們打破矩形的佈局模式，CSS的多列布局能讓我們在Web中實現報紙排版的效果。或許還將會有其它的佈局模式。我將繼續努力將這方面的最新資訊向大家呈現。

　　作者：大漠，W3CPlus創始人，目前就職於手淘。對HTML5、CSS3和Sass等前端指令碼語言有非常深入的認識和豐富的實踐經驗，尤其專注對CSS3的研究，是國內最早研究和使用CSS3技術的一批人。CSS3、Sass和Drupal中國佈道者。