這篇文章主要聊一聊布局這件大事。只要開始步入前端的大門，布局這件事就是逃避不了的，這也是前端開發人員必修的內功。
所以接下來這篇文章我們主要講一講聖杯布局和雙飛翼布局。
當然如果你已經非常了解這兩個布局的話，可以選擇忽略以下內容。
總的來說，這兩個布局都是基於同乙個想法就是左右側欄寬度固定，中間內容欄實現寬度自適應，但是這兩個布局的實現方式又是有所不一樣的。
注意順序
注意：.container應該設定最大寬度是100%，如果設定為寬度100%，則會因為新增內邊距的原因，導致容器的寬度大於瀏覽器的寬度。
當前實現效果：
接下來，實現聖杯布局的核心做法：
使用浮動使元素脫離文件，然後利用margin使left塊固定到middle的左邊，right塊固定到middle的右邊，然後利用相對定位將左右塊移動到自己的位置，這樣聖杯布局就完成了，具體的實現**請看下圖：
ps：利用margin-left:-100%將left塊拉到左邊，margin-left:-220px將right塊拉到右邊效果圖：
這樣就實現了聖杯布局。
當然也可以利用box-sizing:border-box實現聖杯布局：
修改當前的**：
這樣也可以實現上述聖杯布局的效果。
雙飛翼與聖杯布局最大的區別在於雙飛翼主要利用的外邊距實現的。
調整當前網頁布局結構：
在middle塊中新增了middle-body
刪除了.containert的內邊距，寬度設定為100%;
當前效果：
我們可以從中看到，「我是middle」這幾個字被左邊的塊擋住了，
接下來我們利用margin使「我是middle」這幾個字出現
此時效果圖
這樣，雙飛翼布就完成了。
如果你也喜歡前端，那就點個關注吧，嘻嘻嘻。
雙飛翼布局
第一可以實現三列布局左右固定寬度，中間寬度自適應，第二個，通常三列布局都是按照左 sub 中 main 右 extra 順序來寫的，這樣頁面也會根據這個dom結構來順序載入，而如果用雙飛翼布局，可以使三列布局中mian先載入，sub和extra後載入。html class main div clas...
雙飛翼布局
ued的本意是使用者體驗設計，user experience design,通常的理解，我們做的一切是為了呈現在您眼前的頁面。這是我們平時的寫法，為其新增css樣式 如果按照浮動方法寫，頁面在被瀏覽器解析時，按照左側功能區塊，主題內容功能區塊，右側功能區塊進行載入。但是現在很多專案都是需要主體功能區...
雙飛翼布局
雙飛翼布局 zhongjian zuobian zhongjian 作用 是 團隊提出一種優化寫法，main寫在前面，優先載入，優先渲染，而且相容性好。中間部分優先載入,有利於使用者體驗 doctype html html head title 雙飛翼布局 title meta charset ut...