上一篇寫了雙飛翼布局，這篇我就寫下他的兄弟圣杯布局吧~
圣杯布局也是實現(xiàn)三欄布局的方法，左右定寬，中間自適應，中間內容優(yōu)先加載。
最原始的圣杯布局是通過負邊距、左浮動、相對定位、內邊距實現(xiàn)的，然后我在實踐中也發(fā)現(xiàn)了另外兩種實現(xiàn)方式，分別是通過怪異盒模型和flex布局
HTML
HTML結構都是相同的，我先放在這里
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
CSS
我們先看下最祖先的方式吧
通過負邊距、左浮動、相對定位、內邊距實現(xiàn)
1.首先給main一個100%寬度，left和right分別給一個固定的寬度，三者高度和父盒子一樣高，都實現(xiàn)左浮動
效果如下，由于main寬度已經(jīng)撐滿了整個父盒子，left和right被擠到父盒子下面
所以我們要讓left和right上去
2.使用負邊距，給left添加margin-left：-100%（向左移動一個父盒子的寬度），給right添加一個負right寬度的左邊距（向左邊移動一個right盒子的寬度）
可以看到left和right成功移動到我們想到的位置了
但有個問題main盒子的內容被left和right擋住了，所以我們要讓main盒子的內容在left和right之間顯示
3.給container一個左右的padding試下
left和right還是陰魂不散，main還是被擋住了
4.給left和right來個相對定位，讓left向左移動，rght向右移動試試吧
嗯，是的，就是醬紫的滴，應該沒有什么大問題了，收工收工~
完整的CSS
/* 使用浮動、負邊距、內邊距、相對定位實現(xiàn) */
.container {
height: 300px;
background-color: black;
overflow: hidden;
padding: 0 200px;
min-width: 800px;
}
.main {
width: 100%;
height: 300px;
background-color: blue;
float: left;
}
.left {
width: 200px;
height: 300px;
background-color: pink;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 300px;
height: 300px;
background-color: red;
float: left;
margin-left: -300px;
position: relative;
right: -300px;
}
其他兩種方式
怪異盒模型
使用怪異盒模型的區(qū)別就是這里不需要用定位，在mian上加padding替代container上的padding，然后將mian修改為怪異盒模型 box-sizing: border-box，我試了下效果是一樣滴
/* 使用浮動、負邊距、內邊距、怪異盒模型實現(xiàn) */
.container {
height: 300px;
background-color: black;
overflow: hidden;
min-width: 800px;
}
.main {
width: 100%;
height: 300px;
background-color: blue;
float: left;
padding: 0 300px 0 200px;
box-sizing: border-box;
}
.left {
width: 200px;
height: 300px;
background-color: pink;
float: left;
margin-left: -100%;
}
.right {
width: 300px;
height: 300px;
background-color: red;
float: left;
margin-left: -300px;
}
flex
這個不得了了，什么浮動、內邊距、外邊距、怪異盒模型統(tǒng)統(tǒng)都不要??，一個flex搞定，給父盒子一個display：flex，left和right給固定的寬度，main來個flex：1自適應，給left盒子一個order：-1，讓他排在最左邊，畢竟html結構我們是不能改變滴。
/* 使用彈性盒模型實現(xiàn)圣杯模型 */
.container {
height: 300px;
background-color: black;
overflow: hidden;
min-width: 800px;
display: flex;
}
.main {
flex: 1;
height: 300px;
background-color: blue;
}
.left {
width: 200px;
height: 300px;
background-color: pink;
order: -1;
}
.right {
width: 300px;
height: 300px;
background-color: red;
}
OKK，bye~
