在CSS的經(jīng)典布局中呼巷，圣杯布局和雙飛翼布局是十分典型的代表但绕，在眾多前端面試中也常常會(huì)遇到口柳。今天我們就一起來聊聊“圣杯布局”是怎么一回事吧~
效果預(yù)覽圖
【解決需求】
同一行中部分寬度固定竹勉，部分寬度自適應(yīng)的情況
【實(shí)際應(yīng)用】
左右側(cè)邊欄+中間主要內(nèi)容區(qū)域的布局剧包，即俗稱的“固比固布局”（本文以此為例）驳癌；
左邊欄固定寬度滑燃，右邊欄自適應(yīng)寬度；
右邊欄固定颓鲜，左邊欄自適應(yīng)寬度表窘。
【解決方案】
利用負(fù)邊距，內(nèi)邊距控制內(nèi)部寬度甜滨、相對(duì)定位實(shí)現(xiàn)中間區(qū)域?qū)挾茸赃m應(yīng)乐严。
1. 首先寫好html，然后分別設(shè)置左右邊欄和中間部分的寬度衣摩，中間部分寬度設(shè)置為100%昂验；
```
*{
padding: 0;
margin:0;
}
.wrap{
color: #fff;
width: 100%;
overflow: hidden;
background: #eee;
}
.main{
background: #333;
width: 100%;
}
.left{
width: 100px;
background: #DC3E3E;
}
.right{
width: 100px;
background: #DC3E3E;
}
```
2. 負(fù)邊距：為了讓主要內(nèi)容預(yù)先渲染，在html文檔中將中間部分放在左右邊欄前面昭娩。如果按照正常的順序顯示即做右邊欄一定在中間部分后面凛篙。為了使左右邊欄分別位于中間部分的左右兩側(cè)，將三個(gè)元素全部向左浮動(dòng)栏渺，利用負(fù)邊距設(shè)置左邊欄左邊距為-100%呛梆，右邊欄左邊距為右邊欄寬度的負(fù)值，則左右邊欄此時(shí)已經(jīng)分別在中間部分的左右兩邊了磕诊。
```
.main{
float: left;
}
.left{
margin-left: -100%;
float: left;
}
.right{
float: left;
margin-left: -100px;
}
```
3. 內(nèi)邊距控制內(nèi)部寬度
到目前為止填物，左右邊欄分別位于中間欄的兩側(cè)，但是左右邊欄浮動(dòng)在中間欄的上方霎终，會(huì)擋住中間欄內(nèi)容的顯示滞磺，此時(shí)可以通過外部包裹的wrap的內(nèi)邊距來控制中間欄100%的寬度，使左右兩邊空出位置莱褒，然后通過相對(duì)定位將左右邊欄分別移動(dòng)到左右兩側(cè)击困，達(dá)到效果。
不過此處要注意的是广凸，在wrap內(nèi)加內(nèi)邊距會(huì)使得wrap的寬度撐大阅茶，此時(shí)需要使用box-sizing:border-box的屬性使得內(nèi)邊距計(jì)算在既定寬度內(nèi)。
```
.wrap{
padding: 0 100px;
box-sizing: border-box;
}
```
4. 如上一步所講的谅海，利用相對(duì)定位將做右邊欄置于空出來的空白處脸哀。
```
.left{
position: relative;
left: -100px;
}
.right{
position: relative;
left: 100px;
}
```
此時(shí)，我們基本已經(jīng)達(dá)到了我們得目的扭吁，最后我們還可以配合之前所講過的高度布局實(shí)現(xiàn)我們平常經(jīng)常會(huì)見到的網(wǎng)站布局撞蜂。
高度布局：http://www.reibang.com/p/2e907874d5be
【完整代碼示例】
```
*{
padding: 0;
margin:0;
}
.wrap{
color: #fff;
width: 100%;
overflow: hidden;
padding: 0 100px;
background: #eee;
box-sizing: border-box;
position: absolute;
top: 0;
bottom: 0;
}
.main{
background: #333;
width: 100%;
float: left;
height: 100%;
}
.left{
width: 100px;
margin-left: -100%;
float: left;
background: #DC3E3E;
position: relative;
left: -100px;
height: 100%;
}
.right{
float: left;
width: 100px;
margin-left: -100px;
background: #DC3E3E;
position: relative;
left: 100px;
height: 100%;
}
```
【效果預(yù)覽】
到這里就大功告成啦盲镶，歡迎大家指正我的錯(cuò)誤，希望能跟大家學(xué)到更多
?:.?ヽ(?????)??.:?+?
