圣杯布局
圣杯布局是典型的 CSS 布局問題坛怪，有著眾多的解決方案墅拭。
圣杯布局是一種非常經(jīng)典和常用的布局方式活玲，其所指的是三列布局，中間寬度自適應(yīng)谍婉，兩邊定寬舒憾；或者兩列布局，主體寬度自適應(yīng)穗熬，左邊或右邊定寬镀迂。
- 邊欄應(yīng)流動居中，定寬死陆。
- 中間一欄 (主要內(nèi)容) 在 HTML 源碼中應(yīng)該首先元素出現(xiàn)招拙。
- 所有欄同高，忽略實際高度措译。
- 使用的 HTML 標(biāo)記盡量少别凤。
- 當(dāng)頁面內(nèi)容不夠充滿頁面時，頁腳應(yīng)“粘”在底部领虹。
過程
<header>header</header>
<div class="container clearfix">
<div class="main">main</div> // main放在前面先渲染
<div class="left">left</div>
<div class="right">right</div>
</div>
<footer>footer<footer>
- 設(shè)置中間三個div向左浮動规哪，使其排列在一行
- 設(shè)置footer元素清除浮動，阻止與上面的main部分重疊塌衰。
- 設(shè)置中間三個div的寬度诉稍，左右定寬蝠嘉，中間寬度自適應(yīng)。
.container > div {
height: 10vh;
float: left;
}
.main {
width: 100%;
background-color: #5AEBF0;
}
.left {
width: 200px;
background-color: #F668E0;
}
.right {
width: 200px;
background-color: #F668A4;
}
1494083623x2890174022.png
- 主內(nèi)容欄寬度變小杯巨，設(shè)置container的padding蚤告。
- left盒子上去，設(shè)置left的margin-left為-100%服爷，杜恰。
.container {
padding-left: 200px;
}
.left {
width: 200px;
background-color: #F668E0;
margin-left: -100%;
}
1494084112x2890174022.png
由于 container 設(shè)置了內(nèi)邊距，因此中間欄看起來就處在了網(wǎng)頁的中間仍源，但左右兩欄由于排在中間欄的后面心褐，且因為空間不夠被擠到了中間欄的下面
- left盒子移動到左邊，使用相對定位笼踩，設(shè)置left屬性為盒子寬度等量的負值逗爹。
.container > div {
height: 10vh;
float: left;
position: relative;
}
.left {
width: 200px;
background-color: #F668E0;
margin-left: -100%;
left: -200px; /* 或者使用 right: 200px;*/
}
1494084481x2890174022.png
- 最后，我們需要把右側(cè)欄放上去嚎于，此時只需利用上面的原理把他放到 container 的右外邊距的位置即可掘而，我們需要再一次設(shè)置一個負外邊距的值，它等于右側(cè)欄的寬度
1494085959x2890174022.png
