聊聊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。這個網站演示了整個網絡的演進過程以及演進過程中相應產生的產物。感興趣的可以點擊這里詳細了解。上面的網站只演示到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） 接下來簡單的看看每種布局的模式承載的史命。無任何布局模式 歷史上最早的一個網頁是1990年12月20日，歐洲核子研究組織（CERN）的科學家家蒂姆.伯納斯.李在瑞士的研究中心創建的，最初僅為CERN內部的科學家所使用。在這個階段，網站的內容主要是文字內容和圖片為主，制作方法非常的簡易。比如萬維網（WWW），歐洲核子研究組織的一幫科學家為了方便看文檔，傳論文而創造的。這個時候的Web網頁主要是基于Document。Document就是用標記語言加上超鏈接寫成的由文字和圖片構成的HTML頁面，這樣的功能已經完全能滿足學術交流的需要，所以網頁的早期形態和Document一樣，完全基于HTML頁面，并且所有內容都是靜態的。比如下圖所示：表格布局模式 很長的一段時間，，多頁就只有文字信息和圖片組成，而且只是為了查看內容。為了讓頁面好看一點，主要裝飾還是依賴于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。定位布局 隨著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制圖軟件切片導出的頁面），基本上都是使用定位布局。浮動布局 其實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; } 圣杯布局和雙飛翼布局解決的問題是一樣的，都是兩邊定寬，中間自適應的三欄布局，中間欄要在放在文檔流前面以優先渲染。這樣做主要是因為早年的網絡和設備沒有現在這么優秀，為了讓主要的內容先向用戶呈現，所以很多時候都使用這兩種布局方式。甚至可以說，現在很多人都還在使用這兩種布局方式。但如果你繼續閱讀后面的內容之后，你會慢慢放棄浮動布局。雖然在布局的歷史中，他承載了相當長的一段時間的使命，但有更好的，更適合的方式，我們應該要學會選擇與放棄。多列布局 這里要說的多列布局，并不是前面的布局模式產生的多列模式。而是CSS的Multi-column布局模塊。你可能想得到，這個模塊給予了我們脫離position和float這些屬性，就能在網頁上實現多列布局的能力。同樣，根據容器的大小，就可以控制創建欄目的數量，這是非常了不起的一個特點。Multi-column對應的CSS屬性還具有以下一些功能：定義欄目的最大寬度 定義在多欄目之間的間距 在多個欄目中平均分配好顯示的內容 Multi-column好就好在能夠自動為你安排好流體內容，你用不著計算確定欄目的數量，讓他們排排站好就行了。這種布局，就算是在現在，使用的人也不多，必須像報紙這樣的多列布局的風格并不多，但借助他的特性，我們可以實現一些特殊的布局風格。比如瀑布流的布局：由于代碼過多，就不在這里列出了，如果對代碼感興趣的話，可以點擊這里查看，具體實現的步驟，可以閱讀《純CSS實現瀑布流布局》一文。除此之外，多列布局還常用于下圖這樣的布局風格：Flexbox布局 Flexbox是CSS的一個新特性，這個新特性解決我們以前在CSS中很多麻煩問題，比如說內容的伸縮與擴展、垂直居中、等分列、等高列等等。當然，這個屬性也大量的運用于布局當中，特別是在面對品種繁多的移動端的局面下，Flexbox用于布局的優勢也顯現的更為強大。從而慢慢的用來取代了CSS中的浮動布局。使用Flexbox來布局，現在隨處可見。比如@Zoe Gillenwater整理的相關教程和資料。里面有很多關于Flexbox的內容。這里我放幾張圖來演示Flexbox實現布局是多么的簡單和靈活。時到今日，使用Flexbox的場景也越來越多，在將來使用Flexbox場景將會更多。網格布局 前面說過早期的Web頁面僅僅是用來展示文本信息和圖片。但對于現在的Web頁面，不僅僅是這樣了。隨著這么多年的發展。現在大量的網頁設計都是基于網格布局。雖然人們通常注意不到它，但事實上雜亂無章的布局時代確實已經過去了，現在是整齊結構化的天下。無論從理論、美學和整齊來說，這樣的布局都很好平衡。網格結構是所有現代網站的基礎，它總能級最終用戶完美無暇的設計。對于網格系統而言，它也經歷了一個漫長的演變。表格布局雖然痛苦，但可以說表格是網格系統布局的最初模型。正因為有表格布局的存在，才有了后面的CSS網格系統，不管是早期基于浮動完成的網格系統，還是后期依賴于Flexbox完成的網格系統。當然，你可有會說，網格系統的鼻祖不是960gs？雖然960gs是最早出現的網格系統（基于浮動布局），但其網格的思路是來源于表格的。因為表格具有明顯的柵格風格，只不過是使用其它的布局模式，快速模擬了表格的風格，甚至是嵌套表格的網格。加上網格系統讓Web的設計變得結構整齊、布局平衡等。受到眾多設計師的青瞇，也讓擼碼的同學更易實現，并且可以依據此思路制定一套系統，比如很多CSS的Framework都有類似的網格系統布局（不管是浮動還是Flexbox實現的）。不管怎么說，這些網格系統可以達到較好的效果，甚至還可以基于此系統制作工具，通過工具幫助大家快速完成布局。前面我們說了很多種Web的布局模式，但這些布局模式都局限于單維（一維）方向。但對于現代Web頁面的布局，很多時候我們需要的不僅僅是單維的布局，希望在兩個維度都能更好的控制我們的布局。比如下面這樣的一種布局。前面介紹的每種布局模式都可以實現上圖這樣的布局效果，但要實現具有可擴展性，并且自適應強的并不容易實現。歸根究底，前面的這些方法都是單維控制的，只能控制一個方向，對于另一個方向就不好控制了。不過，值得慶幸的是。CSS推出的CSS Grid布局模塊，可以很好的解決這個問題。因為CSS Grid布局打破了以前所有布局方式的維度，它是一個雙維度的布局模塊。它除了可以靈活的控制水平方向之外，還能輕易的控制垂直方向的布局模式。對于上圖那樣的九宮格布局，它就可以輕而易舉的完成。可以說，CSS Grid布局才是Web中的布局模塊，隨著瀏覽器對其支持度越來越強的情況下，它將更會受到青瞇。也將成為未來Web布局中的霸主。特別是將CSS Grid布局和Flexbox布局兩種模式結合在一起，那對于布局言就不會有什么難事。比如下圖這樣的布局：不規則布局 我們常看到的Web布局一般都是遵循按行和列等線性原則，Web網站的布局到今天為止很大程度上受到這些原則的影響。雖然CSS Grid的出現讓布局變得更好，更靈活，但相對于印刷媒體而言，Web布局總體上還是受到很多的限制，特別是內容流上。雜志和報紙一直有很好的辦法來安排內容。比如文本繞著非矩形排列。而CSS的Shapes模塊讓Web布局能像雜志和報紙一樣讓文本內容實現不規則矩形排列。CSS Shapes使網頁設計師能更好的實現自己的創意，除了簡單的長方形和正方形，還可以實現任何幾何圖形布局。除了上述的這些類型的Web布局之外，其實在CSS中還可以借助display的強大屬性實現一些類似于前面介紹的布局類型，比如inline-block、table和table-cell。但這并不是這里要詳細聊的內容，感興趣的同學自己可以嘗試。上面花了一些篇幅和大家聊了一些Web常見的布局類型。但很多時候，除了上述的布局類型之外，我們還可以看到類似于靜態布局（固定布局）、流式布局、自適應布局和響應式布局等。接下來就簡單的聊聊這幾種布局。選擇固定布局、流式布局、彈性布局還是響應式布局？可以說這個問題時常都會困繞著Web開發人員，特別是對布局并不熟悉的開發人員。因為每種布局都有它的優點和缺點。最后的選擇往往取決于需求，而不是哪個更簡單。從這些方面進行考慮，更為恰當。靜態布局 靜態布局其實就是一種固定寬度的布局，不管是一列，兩列還是多列。這種布局有一個設置了固定寬度的容器，里面的各個模塊也是固定寬度而非百分比。重要的是容器元素設置為不能變化。不管網站瀏覽用戶的屏幕（顯示器）的分辨率是多少，網頁都顯示為和其它訪問者相同的寬度。比如早期最為流行的960px的固定寬度布局。整個頁面的內容都在960px的容器中，而且水平居中顯示。比如下圖所示：流式布局 流式布局很多時候也被稱為百分比布局，主體部分都是用了百分比寬度，因此可以自適應用戶的分辨率。頁面元素的寬度按照屏幕分辨率進行適配調整，但整體布局不變。代表作就是網格系統。最大的特色就是網頁中主要的區域尺寸使用百分比，并配合max-width和min-width來布局。很多同學喜歡固定寬度布局勝過于流式布局，因為它更易實現，并確保了設計者所見即用戶所見。而且也無需更多的比例計算。這種布局方式Web前端開發的早期歷史上，用來應對不同尺寸的瀏覽器屏幕，在當今的移動端開發也常用這種布局方式。但期有一個明顯的缺陷：如果屏幕尺度跨度太大，那么在相對其原始設計而言過小或過大的屏幕上不能正常顯示。自適應布局 自適應布局的特點是分別為不同的屏幕分辨率定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕分辨率范圍。改變屏幕分辨率可以切換不同的靜態局部（頁面元素位置發生改變），但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。可以把自適應布局看作是靜態布局的一個系列。響應式布局 隨著CSS媒體查詢技術的成熟，出現了響應式設計概念。響應式設計的目標是確保一個頁面在所有終端上都能顯示出令人滿意的效果。分別為不同的屏幕分辨率定義布局，同時在每個布局中，應用流式布局的理念。也可以把響應式布局看作是流式布局和自適應布局設計結合的產物。總結 歷史是不斷向前的，技術也是如此。雖然CSS在眾多同學眼里是一件輕松的事情，但事實并非如此。正如此文所介紹的CSS實現Web布局，這就不是一件輕松的事情，很多工作兩三年的同學，都不一定能對Web布局實現達到手到擒來。除此之外，在未來，Web布局的模式將會越來越多，越來越強大，比如不久的將來，CSS Shapes能幫助我們打破矩形的布局模式，CSS的多列布局能讓我們在Web中實現報紙排版的效果。或許還將會有其它的布局模式。我將繼續努力將這方面的最新信息向大家呈現。

總結

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

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