聊聊CSS中的布局模式 在大家的印象中，CSS非常的簡單，在此我想再強(qiáng)調(diào)一下，雖然CSS簡單，但并不代表容易。隨著Web技術(shù)的發(fā)展飛快，CSS經(jīng)過二十多年的發(fā)展，其變化也是非常的大。CSS涵蓋的技術(shù)點(diǎn)也非常的多，其中的每一個(gè)點(diǎn)都足夠我們發(fā)很多的時(shí)間去探討。那么今天我們就一起來聊聊CSS中的布局模式，因?yàn)樵谌魏蔚腤eb網(wǎng)站和Web應(yīng)用都離不開布局。對于眾多的布局模式，我們應(yīng)該怎樣給Web產(chǎn)品選擇最適合的布局模式呢？希望這篇文章對大家了解或者給Web產(chǎn)品選擇布局模式有所幫助。Web的演化路程 在互聯(lián)網(wǎng)的演化過程中，Web網(wǎng)站（網(wǎng)頁制作）是Web 1.0時(shí)代的產(chǎn)物，那時(shí)網(wǎng)站的主要內(nèi)容都是靜態(tài)的，用戶使用網(wǎng)站的行為也以瀏覽為主。隨著網(wǎng)頁從學(xué)術(shù)機(jī)構(gòu)走向公眾社會(huì)，網(wǎng)頁承載的功能便超出了學(xué)術(shù)范圍而變得愈加豐富，因此早期網(wǎng)頁的局限性也逐漸顯露出來。2005年以后，互聯(lián)網(wǎng)進(jìn)入了Web 2.0時(shí)代，各種類似桌面軟件的Web應(yīng)用大量涌現(xiàn)，網(wǎng)站的前端也由此發(fā)生了翻天覆地的變化。網(wǎng)頁也不再只是承載單一的文字和圖片，各種富媒體讓網(wǎng)頁的內(nèi)容更加生動(dòng)，網(wǎng)頁上軟件化的交互形式為用戶提供了更多好的使用體驗(yàn)，這些都是基于前端技術(shù)實(shí)現(xiàn)。技術(shù)發(fā)展日新月異，現(xiàn)在業(yè)內(nèi)人員開始提出Web 3.0的概念。最常見的解釋是，網(wǎng)站內(nèi)的信息可以直接和其他網(wǎng)站相關(guān)信息進(jìn)行交互，能通過第三方信息平臺同時(shí)對多家網(wǎng)站的信息進(jìn)行使用；用戶在互聯(lián)網(wǎng)上擁有自己的數(shù)據(jù)，并能在不同網(wǎng)站上使用；完全基于Web，用瀏覽器即可實(shí)現(xiàn)復(fù)雜系統(tǒng)程序才能實(shí)現(xiàn)的系統(tǒng)功有；用戶數(shù)據(jù)審計(jì)之后，同步于網(wǎng)絡(luò)數(shù)據(jù)。Web的整個(gè)演化走過了Web1.0和2.0，即將迎接Web3.0（或者說Web 3.0已經(jīng)到來了），在每個(gè)過程都有相應(yīng)的產(chǎn)物出來，比如下圖所示：上圖的錄頻來自于evolutionoftheweb.com。這個(gè)網(wǎng)站演示了整個(gè)網(wǎng)絡(luò)的演進(jìn)過程以及演進(jìn)過程中相應(yīng)產(chǎn)生的產(chǎn)物。感興趣的可以點(diǎn)擊這里詳細(xì)了解。上面的網(wǎng)站只演示到2012年，與當(dāng)今相比，已有近六年的差距，但對于Web的前面發(fā)展史還是足以幫助我們進(jìn)行Web發(fā)展的進(jìn)程。今后的發(fā)展，將會(huì)是Web 4.0的世界，智能化機(jī)械、生物科技等，可能正如電影Matrix所言，做成“天網(wǎng)”的電腦智能系統(tǒng)，希望電腦不會(huì)控制人類。扯了這么多，簡單的歸納一下Web（說互聯(lián)網(wǎng)技術(shù)更為準(zhǔn)確）的演變的歷史大致如下：1990~2000年，Web 1.0（Web，網(wǎng)作用：連接知識）：主要包括網(wǎng)頁搜索引擎、網(wǎng)站、數(shù)據(jù)庫、文件服務(wù)器等 2000~2010年，Web 2.0（Scocial Web，社會(huì)網(wǎng)作用：連接知識）：引入了社區(qū)、RSS、Wiki、社會(huì)化書簽、社會(huì)化網(wǎng)絡(luò)等概念 2005~2020年，Web 3.0（Sementic Web,語義網(wǎng)作用：連接知識）：由本體、語義查詢、人工智能、智能代理、知識結(jié)點(diǎn)、語義知識管理等構(gòu)成 2015~2030年，Web 4.0（Ubiquitous，無所不在的網(wǎng)作用：連接情報(bào)）：具體內(nèi)容還不大清楚，我想Web 4.0的含義關(guān)鍵在于它在任何時(shí)候，任何地方能夠提供給你任何需要的東西。 用下圖來展示W(wǎng)eb每個(gè)階段的發(fā)展歷程：布局演變史 通過前面的內(nèi)容，或許你對Web的發(fā)展歷史有了一定的了解。可以說整個(gè)Web在不斷的演進(jìn)，那么為Web服務(wù)的理念與技術(shù)等等也在不斷的進(jìn)行演化。而我們今天要要聊的話題是Web布局（Web網(wǎng)站或Web應(yīng)用程序的布局），它也在Web不同的演化過程也有相應(yīng)的演進(jìn)。接下來就回到我們今天要聊的主題當(dāng)中。在Web布局整個(gè)演進(jìn)過程當(dāng)中，經(jīng)歷了沒有任何布局、表格布局、定位布局、浮動(dòng)布局、Flexbox布局等布局模式。除了這些我們常看到的布局之外，即將還會(huì)有Grid、Shapes（類似雜志不規(guī)則布局）這些現(xiàn)代的布局模式。這些布局模式從側(cè)面也反映出其自身是Web演進(jìn)過程中的一種產(chǎn)物，都承載了自己在當(dāng)時(shí)那個(gè)時(shí)期的史命。用@Jen Simmons的一張圖來表達(dá)，更為貼切一些：對于布局，我們還可以按類型和功能來進(jìn)行分類。先來看按類型分類的布局模式：無任何布局模式 表格布布局模式 浮動(dòng)布局模式 定位布局模式 多列布局模式 Flexbox布局模式 Grid布局模式 不規(guī)則布局模式 另外除了類型分類，還可以按功能模式來分類：靜態(tài)布局（Static Layout） 流式布局（Liquid Layout） 自適應(yīng)布局（Adaptive Layout） 響應(yīng)式布局（Responsive Layout） 接下來簡單的看看每種布局的模式承載的史命。無任何布局模式 歷史上最早的一個(gè)網(wǎng)頁是1990年12月20日，歐洲核子研究組織（CERN）的科學(xué)家家蒂姆.伯納斯.李在瑞士的研究中心創(chuàng)建的，最初僅為CERN內(nèi)部的科學(xué)家所使用。在這個(gè)階段，網(wǎng)站的內(nèi)容主要是文字內(nèi)容和圖片為主，制作方法非常的簡易。比如萬維網(wǎng)（WWW），歐洲核子研究組織的一幫科學(xué)家為了方便看文檔，傳論文而創(chuàng)造的。這個(gè)時(shí)候的Web網(wǎng)頁主要是基于Document。Document就是用標(biāo)記語言加上超鏈接寫成的由文字和圖片構(gòu)成的HTML頁面，這樣的功能已經(jīng)完全能滿足學(xué)術(shù)交流的需要，所以網(wǎng)頁的早期形態(tài)和Document一樣，完全基于HTML頁面，并且所有內(nèi)容都是靜態(tài)的。比如下圖所示：表格布局模式 很長的一段時(shí)間，，多頁就只有文字信息和圖片組成，而且只是為了查看內(nèi)容。為了讓頁面好看一點(diǎn)，主要裝飾還是依賴于HTML自帶的標(biāo)簽的屬性。隨著Web技術(shù)的發(fā)展，HTML也越來越成熟。而Web呈現(xiàn)給用戶的不僅僅是文字瀏覽，網(wǎng)絡(luò)制作者希望制作出來的頁面能更適合用戶的瀏覽，或者想讓其能像Word這樣的排版軟件制作出來的文檔。這個(gè)時(shí)候很多網(wǎng)頁開始依賴HTML的表格標(biāo)簽來對Web進(jìn)行布局。在那個(gè)時(shí)候喜歡使用可視化軟件來直接制作網(wǎng)頁，比如FrontPage、DW這樣的。下圖就是DW制作網(wǎng)頁的一個(gè)簡易圖：比如2005年的淘寶頁面，就是用表格制作的，如下圖所示：也可以說表格的布局是Web早期CSS不存在的時(shí)候興趣的，是對table標(biāo)簽不正規(guī)使用（它是表格標(biāo)簽），天生就是用來顯示數(shù)據(jù)的，而不是用來給網(wǎng)頁布局的。W3C說，表格可以用來容納文字、圖片、鏈接、表單以及表格等。但表格不應(yīng)該單純用來做網(wǎng)頁布局，理由是，當(dāng)Web被非可視化設(shè)備渲染的時(shí)候，表格會(huì)出問題，他們指定是屏幕閱讀器以及盲文瀏覽器。另外，表格在大型顯示設(shè)備上會(huì)強(qiáng)迫用戶左右滾動(dòng)。雖然W3C說不建議用表格來布局，特別是在CSS出現(xiàn)之后，更是被人嫌棄，事實(shí)上對表格的責(zé)難主要有：代碼臃腫 頁面渲染性能問題 不利于搜索引擎優(yōu)化 可訪問性差 不夠語義 事實(shí)上，表格也并不是一無是處，他也有自己的優(yōu)點(diǎn)：可觀性好，當(dāng)用戶插入一個(gè)表格的時(shí)候就可以立即看到效果 簡單方便，適合初入門的用戶操作 可讀性好，稍微懂一點(diǎn)HTML的同學(xué)就能看懂 特別是CSS越來越成熟的時(shí)候，表格對于布局而言已經(jīng)退出了歷史的舞臺，但并不是說<table>標(biāo)簽就再也不使用了。前面也說過了，<table>表生就是用來顯示數(shù)據(jù)的，所以不管什么時(shí)候，表格用來顯示數(shù)據(jù)還是最佳的一種方式。如果你追求完美，又不想使用表格的顯示數(shù)據(jù)，那也不要緊，你可以使用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> 特別是在移動(dòng)端，如果你想對底部的工具欄有一個(gè)等分列的布局效果，使用display:table和display:table-cell將也是種完美的方案。只不過你需要添加width: 100%和table-layout:fixed。定位布局 隨著CSS的強(qiáng)大和HTML更多元素標(biāo)簽的出現(xiàn)，布局不在局限于表格。而對于后端或者說早期的前端人員（網(wǎng)頁設(shè)計(jì)師），常采用的布局是CSS中的position各屬性（fixed、absolute等）來布局。這種方式的布局能讓你快速達(dá)到想要的布局效果。當(dāng)然也有很多同學(xué)直接嘗試采用 PSD2HTML這樣的類似工具，直接將設(shè)計(jì)圖轉(zhuǎn)換成Web頁面。雖然這種方式能快速實(shí)現(xiàn)Web的布局效果，但也受到很多的局限性：需要明確指定元素的大小 需要明確計(jì)算元素位置坐標(biāo) 難于維護(hù) 或許其中還有很多其他不利的因素。因此，這樣的布局也并算是一種好的布局模式，但對于不太懂CSS的同學(xué)而言，這是一種簡單易懂的布局。在實(shí)際布局當(dāng)中，模態(tài)彈出框和固定頁頭，頁腳有常見定位布局的身影，特別是水平垂直居中：.center {width: 300px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) } 如果你使用PSD2HTML這樣的工具轉(zhuǎn)換出來的頁面（特別早期的Photoshop或者Firework制圖軟件切片導(dǎo)出的頁面），基本上都是使用定位布局。浮動(dòng)布局 其實(shí)CSS中的浮動(dòng)布局，它的初衷并不是用來布局的，而是用來處理文本的一種排版方式。但是廣大的CSSer發(fā)揮其無窮的智慧，硬是將其用于Web的布局中，而且這種布局方式成為一種主流的布局方式，并且持續(xù)了很多年。直到Flexbox布局的出現(xiàn)和移動(dòng)端的興起，浮動(dòng)布局才慢慢的被其取替。特別是在2004年傅捷、王宗義和祝軍翻譯了美國塞爾達(dá)曼（Zeldman J.）的著作《網(wǎng)站重構(gòu)》一書。這本書受到廣大Web愛好者的青瞇，可以說讓國內(nèi)整個(gè)前端行業(yè)（那時(shí)候還沒有前端這樣的職位）發(fā)生了很大的一個(gè)變化。我記得那時(shí)候，淘寶UED說：“我們要做地球上最優(yōu)秀的前端”。這本書稱得上是給整個(gè)行業(yè)帶來了革命性的變化，而就這場革命也造就了“21世界最大的IT冤案”。為什么說是21世界最大的IT冤案呢？只要2004年以后看了這本書的同學(xué)（并不是所有同學(xué)(^_^)），只要看到Web頁面源碼中有table標(biāo)簽，就會(huì)說這個(gè)不行，寫這個(gè)頁面的人不專業(yè)，頁面也是垃圾，不符合W3C規(guī)范。其實(shí)這本書從來也沒有說網(wǎng)頁出現(xiàn)table標(biāo)簽就是垃圾網(wǎng)頁，就是不符合W3C標(biāo)準(zhǔn)的頁面。除了造成21世紀(jì)最大的IT冤案之外，還有災(zāi)難性的DIV+CSS的泛濫。出現(xiàn)最多的詞就是div，大家覺得我會(huì)div，我就很高大上。而且整個(gè)頁面下來，除了div，就是div。什么p標(biāo)簽、span標(biāo)簽基本上是找不到。這個(gè)時(shí)候就是div的泛濫，根本也沒有什么語義化，可讀性一說。感覺有點(diǎn)跑題了，還是回到正題中來。在使用浮動(dòng)布局這些年當(dāng)中，從中還演變出來很多布局方式，比如后面要聊的靜態(tài)布局、流式布局、自適應(yīng)布局和響應(yīng)式布局等。在CSS的布局模式當(dāng)中，浮動(dòng)布局經(jīng)歷的時(shí)期是最長的，持續(xù)了十多年的歷史。在這個(gè)時(shí)期也演變出很多經(jīng)典的布局。其中要屬“圣杯”和“雙飛翼”兩者最為經(jīng)典。這兩種方法實(shí)現(xiàn)的都是三欄布局，兩邊的固定寬度，中間自適應(yīng)，它們實(shí)現(xiàn)的效果是一樣的，差別只是實(shí)現(xiàn)的思想。圣杯布局圣杯布局：左、中、右。中間的寬度為100%，獨(dú)占一行。使用負(fù)邊距（margin-left）把左右兩列拉到和中間列同一行。左列使用margin-left:-100% 右例使用margin-left: -右列寬度 同時(shí)左、中、右三列的容器設(shè)置左右padding來給左右兩列留下相應(yīng)寬度（左、右列寬度）。<!-- 圣杯的 HTML 結(jié)構(gòu) --> <div class="container"><!-- 中間的 div 必須寫在最前面 --><div class="middle">中間彈性區(qū)</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; } 雙飛翼布局雙飛翼布局和圣杯布局類似，也是左，中，右三列，中列里面會(huì)再套一個(gè)容器。中列寬度設(shè)置為100% 使用負(fù)邊距margin-left把左右兩列拉到和中列同一行 在中列內(nèi)的容器div設(shè)置margin-left和margin-right給左右兩列留下對應(yīng)的空間 實(shí)現(xiàn)代碼也很簡單：<!-- 雙飛翼的 HTML 結(jié)構(gòu) --> <div class="container"><!-- 中間的 div 必須寫在最前面 --><div class="middle"><div class="middle-inner">中間彈性區(qū)</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; } 圣杯布局和雙飛翼布局解決的問題是一樣的，都是兩邊定寬，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以優(yōu)先渲染。這樣做主要是因?yàn)樵缒甑木W(wǎng)絡(luò)和設(shè)備沒有現(xiàn)在這么優(yōu)秀，為了讓主要的內(nèi)容先向用戶呈現(xiàn)，所以很多時(shí)候都使用這兩種布局方式。甚至可以說，現(xiàn)在很多人都還在使用這兩種布局方式。但如果你繼續(xù)閱讀后面的內(nèi)容之后，你會(huì)慢慢放棄浮動(dòng)布局。雖然在布局的歷史中，他承載了相當(dāng)長的一段時(shí)間的使命，但有更好的，更適合的方式，我們應(yīng)該要學(xué)會(huì)選擇與放棄。多列布局 這里要說的多列布局，并不是前面的布局模式產(chǎn)生的多列模式。而是CSS的Multi-column布局模塊。你可能想得到，這個(gè)模塊給予了我們脫離position和float這些屬性，就能在網(wǎng)頁上實(shí)現(xiàn)多列布局的能力。同樣，根據(jù)容器的大小，就可以控制創(chuàng)建欄目的數(shù)量，這是非常了不起的一個(gè)特點(diǎn)。Multi-column對應(yīng)的CSS屬性還具有以下一些功能：定義欄目的最大寬度 定義在多欄目之間的間距 在多個(gè)欄目中平均分配好顯示的內(nèi)容 Multi-column好就好在能夠自動(dòng)為你安排好流體內(nèi)容，你用不著計(jì)算確定欄目的數(shù)量，讓他們排排站好就行了。這種布局，就算是在現(xiàn)在，使用的人也不多，必須像報(bào)紙這樣的多列布局的風(fēng)格并不多，但借助他的特性，我們可以實(shí)現(xiàn)一些特殊的布局風(fēng)格。比如瀑布流的布局：由于代碼過多，就不在這里列出了，如果對代碼感興趣的話，可以點(diǎn)擊這里查看，具體實(shí)現(xiàn)的步驟，可以閱讀《純CSS實(shí)現(xiàn)瀑布流布局》一文。除此之外，多列布局還常用于下圖這樣的布局風(fēng)格：Flexbox布局 Flexbox是CSS的一個(gè)新特性，這個(gè)新特性解決我們以前在CSS中很多麻煩問題，比如說內(nèi)容的伸縮與擴(kuò)展、垂直居中、等分列、等高列等等。當(dāng)然，這個(gè)屬性也大量的運(yùn)用于布局當(dāng)中，特別是在面對品種繁多的移動(dòng)端的局面下，Flexbox用于布局的優(yōu)勢也顯現(xiàn)的更為強(qiáng)大。從而慢慢的用來取代了CSS中的浮動(dòng)布局。使用Flexbox來布局，現(xiàn)在隨處可見。比如@Zoe Gillenwater整理的相關(guān)教程和資料。里面有很多關(guān)于Flexbox的內(nèi)容。這里我放幾張圖來演示Flexbox實(shí)現(xiàn)布局是多么的簡單和靈活。時(shí)到今日，使用Flexbox的場景也越來越多，在將來使用Flexbox場景將會(huì)更多。網(wǎng)格布局 前面說過早期的Web頁面僅僅是用來展示文本信息和圖片。但對于現(xiàn)在的Web頁面，不僅僅是這樣了。隨著這么多年的發(fā)展。現(xiàn)在大量的網(wǎng)頁設(shè)計(jì)都是基于網(wǎng)格布局。雖然人們通常注意不到它，但事實(shí)上雜亂無章的布局時(shí)代確實(shí)已經(jīng)過去了，現(xiàn)在是整齊結(jié)構(gòu)化的天下。無論從理論、美學(xué)和整齊來說，這樣的布局都很好平衡。網(wǎng)格結(jié)構(gòu)是所有現(xiàn)代網(wǎng)站的基礎(chǔ)，它總能級最終用戶完美無暇的設(shè)計(jì)。對于網(wǎng)格系統(tǒng)而言，它也經(jīng)歷了一個(gè)漫長的演變。表格布局雖然痛苦，但可以說表格是網(wǎng)格系統(tǒng)布局的最初模型。正因?yàn)橛斜砀癫季值拇嬖?#xff0c;才有了后面的CSS網(wǎng)格系統(tǒng)，不管是早期基于浮動(dòng)完成的網(wǎng)格系統(tǒng)，還是后期依賴于Flexbox完成的網(wǎng)格系統(tǒng)。當(dāng)然，你可有會(huì)說，網(wǎng)格系統(tǒng)的鼻祖不是960gs？雖然960gs是最早出現(xiàn)的網(wǎng)格系統(tǒng)（基于浮動(dòng)布局），但其網(wǎng)格的思路是來源于表格的。因?yàn)楸砀窬哂忻黠@的柵格風(fēng)格，只不過是使用其它的布局模式，快速模擬了表格的風(fēng)格，甚至是嵌套表格的網(wǎng)格。加上網(wǎng)格系統(tǒng)讓W(xué)eb的設(shè)計(jì)變得結(jié)構(gòu)整齊、布局平衡等。受到眾多設(shè)計(jì)師的青瞇，也讓擼碼的同學(xué)更易實(shí)現(xiàn)，并且可以依據(jù)此思路制定一套系統(tǒng)，比如很多CSS的Framework都有類似的網(wǎng)格系統(tǒng)布局（不管是浮動(dòng)還是Flexbox實(shí)現(xiàn)的）。不管怎么說，這些網(wǎng)格系統(tǒng)可以達(dá)到較好的效果，甚至還可以基于此系統(tǒng)制作工具，通過工具幫助大家快速完成布局。前面我們說了很多種Web的布局模式，但這些布局模式都局限于單維（一維）方向。但對于現(xiàn)代Web頁面的布局，很多時(shí)候我們需要的不僅僅是單維的布局，希望在兩個(gè)維度都能更好的控制我們的布局。比如下面這樣的一種布局。前面介紹的每種布局模式都可以實(shí)現(xiàn)上圖這樣的布局效果，但要實(shí)現(xiàn)具有可擴(kuò)展性，并且自適應(yīng)強(qiáng)的并不容易實(shí)現(xiàn)。歸根究底，前面的這些方法都是單維控制的，只能控制一個(gè)方向，對于另一個(gè)方向就不好控制了。不過，值得慶幸的是。CSS推出的CSS Grid布局模塊，可以很好的解決這個(gè)問題。因?yàn)镃SS Grid布局打破了以前所有布局方式的維度，它是一個(gè)雙維度的布局模塊。它除了可以靈活的控制水平方向之外，還能輕易的控制垂直方向的布局模式。對于上圖那樣的九宮格布局，它就可以輕而易舉的完成。可以說，CSS Grid布局才是Web中的布局模塊，隨著瀏覽器對其支持度越來越強(qiáng)的情況下，它將更會(huì)受到青瞇。也將成為未來Web布局中的霸主。特別是將CSS Grid布局和Flexbox布局兩種模式結(jié)合在一起，那對于布局言就不會(huì)有什么難事。比如下圖這樣的布局：不規(guī)則布局 我們常看到的Web布局一般都是遵循按行和列等線性原則，Web網(wǎng)站的布局到今天為止很大程度上受到這些原則的影響。雖然CSS Grid的出現(xiàn)讓布局變得更好，更靈活，但相對于印刷媒體而言，Web布局總體上還是受到很多的限制，特別是內(nèi)容流上。雜志和報(bào)紙一直有很好的辦法來安排內(nèi)容。比如文本繞著非矩形排列。而CSS的Shapes模塊讓W(xué)eb布局能像雜志和報(bào)紙一樣讓文本內(nèi)容實(shí)現(xiàn)不規(guī)則矩形排列。CSS Shapes使網(wǎng)頁設(shè)計(jì)師能更好的實(shí)現(xiàn)自己的創(chuàng)意，除了簡單的長方形和正方形，還可以實(shí)現(xiàn)任何幾何圖形布局。除了上述的這些類型的Web布局之外，其實(shí)在CSS中還可以借助display的強(qiáng)大屬性實(shí)現(xiàn)一些類似于前面介紹的布局類型，比如inline-block、table和table-cell。但這并不是這里要詳細(xì)聊的內(nèi)容，感興趣的同學(xué)自己可以嘗試。上面花了一些篇幅和大家聊了一些Web常見的布局類型。但很多時(shí)候，除了上述的布局類型之外，我們還可以看到類似于靜態(tài)布局（固定布局）、流式布局、自適應(yīng)布局和響應(yīng)式布局等。接下來就簡單的聊聊這幾種布局。選擇固定布局、流式布局、彈性布局還是響應(yīng)式布局？可以說這個(gè)問題時(shí)常都會(huì)困繞著Web開發(fā)人員，特別是對布局并不熟悉的開發(fā)人員。因?yàn)槊糠N布局都有它的優(yōu)點(diǎn)和缺點(diǎn)。最后的選擇往往取決于需求，而不是哪個(gè)更簡單。從這些方面進(jìn)行考慮，更為恰當(dāng)。靜態(tài)布局 靜態(tài)布局其實(shí)就是一種固定寬度的布局，不管是一列，兩列還是多列。這種布局有一個(gè)設(shè)置了固定寬度的容器，里面的各個(gè)模塊也是固定寬度而非百分比。重要的是容器元素設(shè)置為不能變化。不管網(wǎng)站瀏覽用戶的屏幕（顯示器）的分辨率是多少，網(wǎng)頁都顯示為和其它訪問者相同的寬度。比如早期最為流行的960px的固定寬度布局。整個(gè)頁面的內(nèi)容都在960px的容器中，而且水平居中顯示。比如下圖所示：流式布局 流式布局很多時(shí)候也被稱為百分比布局，主體部分都是用了百分比寬度，因此可以自適應(yīng)用戶的分辨率。頁面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但整體布局不變。代表作就是網(wǎng)格系統(tǒng)。最大的特色就是網(wǎng)頁中主要的區(qū)域尺寸使用百分比，并配合max-width和min-width來布局。很多同學(xué)喜歡固定寬度布局勝過于流式布局，因?yàn)樗讓?shí)現(xiàn)，并確保了設(shè)計(jì)者所見即用戶所見。而且也無需更多的比例計(jì)算。這種布局方式Web前端開發(fā)的早期歷史上，用來應(yīng)對不同尺寸的瀏覽器屏幕，在當(dāng)今的移動(dòng)端開發(fā)也常用這種布局方式。但期有一個(gè)明顯的缺陷：如果屏幕尺度跨度太大，那么在相對其原始設(shè)計(jì)而言過小或過大的屏幕上不能正常顯示。自適應(yīng)布局 自適應(yīng)布局的特點(diǎn)是分別為不同的屏幕分辨率定義布局，即創(chuàng)建多個(gè)靜態(tài)布局，每個(gè)靜態(tài)布局對應(yīng)一個(gè)屏幕分辨率范圍。改變屏幕分辨率可以切換不同的靜態(tài)局部（頁面元素位置發(fā)生改變），但在每個(gè)靜態(tài)布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化。可以把自適應(yīng)布局看作是靜態(tài)布局的一個(gè)系列。響應(yīng)式布局 隨著CSS媒體查詢技術(shù)的成熟，出現(xiàn)了響應(yīng)式設(shè)計(jì)概念。響應(yīng)式設(shè)計(jì)的目標(biāo)是確保一個(gè)頁面在所有終端上都能顯示出令人滿意的效果。分別為不同的屏幕分辨率定義布局，同時(shí)在每個(gè)布局中，應(yīng)用流式布局的理念。也可以把響應(yīng)式布局看作是流式布局和自適應(yīng)布局設(shè)計(jì)結(jié)合的產(chǎn)物。總結(jié) 歷史是不斷向前的，技術(shù)也是如此。雖然CSS在眾多同學(xué)眼里是一件輕松的事情，但事實(shí)并非如此。正如此文所介紹的CSS實(shí)現(xiàn)Web布局，這就不是一件輕松的事情，很多工作兩三年的同學(xué)，都不一定能對Web布局實(shí)現(xiàn)達(dá)到手到擒來。除此之外，在未來，Web布局的模式將會(huì)越來越多，越來越強(qiáng)大，比如不久的將來，CSS Shapes能幫助我們打破矩形的布局模式，CSS的多列布局能讓我們在Web中實(shí)現(xiàn)報(bào)紙排版的效果。或許還將會(huì)有其它的布局模式。我將繼續(xù)努力將這方面的最新信息向大家呈現(xiàn)。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。