CSS布局 三欄布局

css布局技術可謂是前端技術中最基礎的技術，就是因為基礎，所以我認為要更加熟練，深入的去掌握，去梳理。

· 注意dom結構的排列順序。

因為左右兩側的dom都是浮動布局，而中間的dom則是普通的文件流，所以為了規避瀏覽器正常的頁面渲染，即先解析左側dom(浮動)，再解析中間的dom(普通文件流，寬度100%)而導致解析最後的右側dom(浮動)時因為寬度的問題，而掉到下一行的情況。

· 因為dom結構順序實際內容反而最後渲染出來。

· 左右兩欄高度無法做到100%，除非設定body, html高度為100%。

具體**：

this is left
this is right
this is main

通過定位實現的三欄布局，其實現方式與浮動相類似，與浮動相比，它具有以下特點：

· 無需手動更改dom結構的順序

· 左右兩欄可以實現100%高度，無需手動定高，但只支援ie7+

定位方式也有它的缺點，比如當給中間dom定義了最小寬度時，左右兩欄會蓋在中間的dom上。

具體**：

this is left
this is main
this is right

聖杯布局【holy grail of layouts】是kevin cornell在2023年提出的一種布局模型概念，在國內最早是由**ued的工程師傳播開來。

聖杯布局的特點是：

1、三列布局，中間寬度自適應，兩邊定寬；

2、中間欄要在瀏覽器中優先展示渲染；

3、允許任意列的高度最高；

4、要求只用乙個額外的div標籤；

5、要求用最簡單的css、最少的hack語句；

實現聖杯布局的核心技術就是浮動與定位相結合使用。

從最簡單的聖杯布局開始著手：

3.1 兩欄-左側定寬

仔細看**，我可以得出乙個結論，聖杯布局的html結構就是乙個包裹層(.wrap)，然後裡面是我們所要放的結構：左側欄(.left) 和 主欄(.main) 。為了能讓主欄優先解析渲染，所以將其html結構放在最前面。

在css上，結構相關的html標記都要進行浮動，使他們進行一行併排開來，但由於主欄的寬度已經是最外包裹層最大的寬度（去除padding），所以左側欄會掉到第二行，因此需要為其設定:

margin-left:-100% 

position:relative;
left:-150px;

通過margin負值瀏覽器會將側欄從第二行拉向第一行，而這裡的-100%，指的就是側欄所在父容器的寬度，所以最終側欄會被拉向父容器第一行的最左側。接著再進行相對定位（不會脫離文件流），最後通過左側偏移值(left)將其拉回到瀏覽器的最左邊。

3.2 兩欄-右側定寬

左側定寬與右側定寬最大的不同就是右側欄可以有浮動，然後設定margin-right:-150px便可以實現。

為什麼可以這麼做呢？其實很簡單因為我們的包裹成(.wrap)設定了右間距，而當我們的右側欄向右偏移了150px時，便已經脫離了.wrap包裹層。相當於脫離了bfc的環境，此時右側欄由於浮動便會自動上浮。

3.3 聖杯布局 - 側邊欄都在左邊

3.4 聖杯布局-側邊欄都在右邊

3.5 聖杯布局-兩側定寬

由以上的基礎認識後，我們就可以很容易的寫出兩欄定寬，共計3欄的「聖杯布局」。

雙飛翼布局實際上是對聖杯布局的改進版，相比於聖杯布局，它減少了相對定位，控制偏移值等css控制，而相應的雙飛翼布局也則增加了html結構。

雙飛翼的核心思路就是為主欄增加乙個包裹成，然後讓這個包裹成與左右兩個側欄同時進行浮動，最後通過設定與聖杯布局相似的負邊距值(margin)，便可以實現三欄布局，從而實現不需要定位進行輔助。

詳細**：

flex 布局是css3推出的一種可塑布局方案，其功能強大且靈活。

flex盒子預設情況下會將其內部的子元素按照html結構的順序併排一行來排列展示。如果所有子元素的寬度之和大於當前的flex盒子的寬度時，flex盒子會自動調整每個子盒子的寬度。

也是利用這個特性，我們可以很方便的實現通過flex進行的三列布局。

ps：flex 再pc端上只有ie10+ chrome21+ firefox 22+ 才被支援，但是在手機端上目前基本已經可以被全部支援

說明：order 是css3的乙個新屬性，其值為整數值，用於設定flex子元素的排列順序，值越小的子元素越排在前面。

CSS布局 三欄布局

題外話 抓狂系列片之叄個我。三欄布局要求說明 兩邊固定寬度，中間自適應，頂部對齊 html文件結構有三種 內層div順序不同 左右中 左中右。實現效果 方法如下 1.左右中 對左右子元素使用了浮動屬性 float 從而脫離了文件流，如果按照正常左中右的順序，會導致右子元素出現在中間子元素的右下方。所...

div 布局 CSS布局 三欄布局

所謂三欄布局，通常是指左右兩欄定寬，中間一欄自適應頁面寬度填滿剩餘空間的布局。這裡有一點細節 主要內容部分，即中間欄dom放在了左右兩欄dom之前，在dom樹渲染的時候會被優先渲染。div聖杯布局的原理是 container設定了padding之後浮動子元素的寬度計算100 是相對於containe...

CSS 三列布局（三欄布局）

傳統三列布局 左右定寬，中間自適應 1.絕對定位 外邊距實現 左右盒子絕對定位，固定於頁面左右兩側 中間盒子的 margin left,margin right 分別等於左右兩個盒子的寬度。css left middle right 2.浮動 外邊距實現 左右盒子浮動到頁面兩側，中間盒子的 marg...