CSS 聖盃佈局 / 雙飛翼佈局的實現
摘要：
工作的越久，有些基礎知識我們可能就逐漸淡忘了，今天我們來回顧一下css的聖盃佈局和雙飛翼佈局，
這兩個名詞你可能不熟， 那三欄佈局你肯定就非常熟悉了，
就是兩邊定寬， 中間自適應 的 佈局
1 ， 聖盃佈局
<!--三欄佈局-->
<header>三欄佈...
工作的越久，有些基礎知識我們可能就逐漸淡忘了，今天我們來回顧一下css的聖盃佈局和雙飛翼佈局，
這兩個名詞你可能不熟， 那三欄佈局你肯定就非常熟悉了，
就是兩邊定寬， 中間自適應 的 佈局
1 ， 聖盃佈局
<!--三欄佈局--> <header>三欄佈局</header> <div class="container"> <div class="center column">center</div> <div class="left column">left</div> <div class="right column">right</div> </div> <footer>footer</footer>
首先HTML結構是這樣的，因為要保證中間的結構先渲染， 所以 center 要放在 最前面 。
*{
margin: 0;
padding: 0;
}
body{
min-width: 700px;
}
header , footer{
background-color: antiquewhite;
text-align: center;
}
footer{
clear: both;
}
.container{
height: 200px;
}
.container .column{
float: left;
position: relative;
height: 100%;
}
.center{
width: 100%;
background-color: tomato;
}
.left{
width: 200px;
background-color: aqua;
}
.right{
width: 200px;
background-color: chartreuse;
}
先讓它們浮動， 並給left 和 right 一個 固定 寬度， center寬度100%，
footer清除浮動流， 結果變成上面這樣 。
然後我們要把 left 和 right 放上去
先把left 放上去 ：
.left{
width: 200px;
background-color: aqua;
margin-left: -100%;
}
加上 一個 margin-left 為 負的自己的寬度 ， 變成了這樣：
我們可以看到 center的文字被 left 蓋住了 ， 所以給container加一個padding
.container{
height: 200px;
padding: 0 200px;
}
變成了這樣：
由於加了padding， 內容區域變小， left 也跟過來了， 所以要給left設定一個left:
.left{
width: 200px;
background-color: aqua;
margin-left: -100%;
left: -200px;
}
這樣left 就到最左邊了， center文字也出來了， 同理right
.right{
width: 200px;
background-color: chartreuse;
margin-left: -100%;
right: -100%;
}
最終效果：
2 雙飛翼佈局（始於淘寶的UED）
和聖盃佈局差不多， 不同之處在於它們處理中間部分被兩邊蓋住的方法不同
雙飛翼佈局給center加了一個inner center ，而不是在最外層加container
HTML：
<header>雙飛翼佈局</header> <div class="center column"> <div class="inner-center"> center </div> <div class="left column">left</div> <div class="right column">right</div> </div>
然後 給 inner-center 加margin (只列出關鍵程式碼) :
.center .inner-center{
margin-left: 200px;
margin-right: 200px;
height: 100%;
background-color: tomato;
}
.left{
width: 200px;
background-color: aqua;
margin-left: -100%;
}
.right{
width: 200px;
background-color: chartreuse;
margin-left: -200px;
}
最終效果和聖盃佈局一樣。。。。。。
“我們相信人人都可以成為一個WEB前端開發大神，現在開始，找個師兄，帶你入門，學習的路上不再迷茫。這裡是WEB前端開發修真院，初學者轉行到網際網路行業的聚集地。"
大師兄先送你一套前端入門心法，加qq群 853597293 即可免費領取
