為啥寫這篇文章
網上關於這兩種布局的文章大多數都只是給了**實現，而沒有說出其中關鍵性**的作用和原理。
布局實現的目的
1.三列布局，兩端固定寬度(其實可以不用固定寬度），中間欄自適應。
2.中間欄優先渲染。
3.任意欄高度自由不限制。
效果展示
布局實現
一.聖杯布局
1.由於要實現中間欄先渲染，所以需要將center放置前面。
="content1 box"
>
="center"
>center<
/div>
="left"
>left<
/div>
="right"
>right<
/div>
<
/div>2.將center，left，right設定浮動，並設定寬度。
.box
.box div
.content1 div
.content1 .center
.content1 .left
.content1 .right
3.接下來是最為關鍵的步驟，設定left的margin-left為-100%，right的margin-left為本身寬度的負值。
.box
.box div
.content1 div
.content1 .center
.content1 .left
.content1 .right
原理：當給margin新增%值時，是根據父元素的寬度來計算的，所以當設定margin-left：-100%後，left剛好被移動到上一行相同位置。而right不需要移動到上一行相同位置，只需要自身在上一行就行，所以只需要設定margin-left為自身的寬度負值後，自動會往上行排。通過**不難看出來。
4.解決center被遮擋。
方法一
.box
.box div
.content1 div
.content1 .center
.content1 .left
.content1 .right
解釋一下為什麼要這樣子寫
box-sizing: border-box;將容器變為怪異盒模型，使得容器實際寬度=內容寬度+邊框寬度+填充寬度。那麼，當我設定了padding: 0 300px;之後，內容的寬度就剛好是中間的部分了。而兩邊的填充寬度剛好就是left和right的寬度。
二.雙飛翼布局
相對於聖杯布局來說，多加了乙個容器。
="content2"
>
="main"
>
="center"
>center<
/div>
<
/div>
="left"
>left<
/div>
="right"
>right<
/div>
<
/div>這種做法看看其他的人怎麼做的8 ，我主要講的時候使用margin-left的作用和原理。?
聖杯布局 雙飛翼布局
前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 container middle left right style head ...
布局 聖杯布局 雙飛翼布局
隨著前端技術的發展推進，web端的布局方式已基本成熟，那麼在 布局方式中，三列布局最為常用，布局方式也有很多，漸漸的開發者們開始從效率的角度優化自己的 如果三排布局能將中間的模組放在dom樹前面，那麼瀏覽器在做重繪的時候不久有限顯示了嗎？機制的開發者們開始圍繞者這個方向進行了dom的優化，於是誕生了...
聖杯 雙飛翼布局
自己雖然經歷著web應用的開發,總是拿著別人寫好的css來引用到自己的專案當中,甚至一度迷上了bootstrap,發現有了它自己可以不用在寫程式邏輯的同時還要去修改別人的css.當然開發的應用大多數是企業內部應用,個別網際網路的程式.2016偶然的機會接觸到前端這個概念,發現自己還是挺喜歡前端的這些...