問(wèn)題1：圣杯布局的原理是怎樣的? 簡(jiǎn)述實(shí)現(xiàn)圣杯布局的步驟。
原理大致是這樣的：采用負(fù)邊距使得浮動(dòng)元素達(dá)到預(yù)設(shè)的位置后，再使用padding使得兩側(cè)留出空白區(qū)域待左、右邊距占用，然后再使用相對(duì)定位使得左、右邊距能夠流向預(yù)定的位置。
第一步：先寫(xiě)出html代碼
<div class="bd-3-lr">
<div class="main">
<p>主內(nèi)容欄自適應(yīng)寬度</p>
</div>
<div class="aside-1">
<p>側(cè)邊欄1固定寬度</p>
</div>
<div class="aside-2">
<p>側(cè)邊欄2固定寬度</p>
</div>
</div>
注意的是，父元素的三欄務(wù)必先寫(xiě)中間盒子。因?yàn)橹虚g盒子是要被優(yōu)先渲染。并且設(shè)置其自適應(yīng)為width:100%。
第二步 寫(xiě)css樣式
（1）main ,左 ,右三個(gè)區(qū)塊都設(shè)置左浮動(dòng)，父元素清除浮動(dòng)，main區(qū)塊設(shè)置100%，左右兩區(qū)塊需要定寬，比如200px;
（2）左區(qū)塊設(shè)置margin-left ：-100%,使其覆蓋main區(qū)塊的左邊區(qū)域。這個(gè)-100%是以mian的寬度砍掉兩邊的padding值后的寬度
（3）右區(qū)塊設(shè)置margin-left ：負(fù)自身寬度,使其覆蓋main區(qū)塊的右邊區(qū)域。負(fù)邊距起始位置也是main砍掉右邊的padding的位置起算。
（4）main自身加padding 。.main{ padding: 0 200px;} ，讓父容器的3個(gè)區(qū)塊往中間擠。
（5）用相對(duì)定位position:relative,leftright.讓左右兩個(gè)區(qū)塊在不脫離文檔流的情況下偏移位置，拉出自身寬度，覆蓋到父元素的padding上。同時(shí)保證左右兩區(qū)塊移動(dòng)時(shí)候不遮擋中間。
問(wèn)題2：雙飛翼布局的原理? 實(shí)現(xiàn)步驟?
雙飛翼和圣杯也是先設(shè)置三欄元素全部float，左右兩欄添加負(fù)邊框讓其和中間元素?cái)D在一行。圣杯用的是padding和相對(duì)定位，雙飛翼的不同是，比如雙飛翼的main中多了一層div嵌套，把margin拿到內(nèi)層上去，在內(nèi)部嵌套中設(shè)置左右margin，然后另外兩個(gè)模塊分別用負(fù)邊距拉到指定位置。
