問題1：圣杯布局的原理是怎樣的? 簡述實現(xiàn)圣杯布局的步驟碟案。
原理大致是這樣的：采用負(fù)邊距使得浮動元素達(dá)到預(yù)設(shè)的位置后惩妇，再使用padding使得兩側(cè)留出空白區(qū)域待左、右邊距占用掌唾，然后再使用相對定位使得左赋续、右邊距能夠流向預(yù)定的位置。
第一步：先寫出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ù)必先寫中間盒子囊陡。因為中間盒子是要被優(yōu)先渲染。并且設(shè)置其自適應(yīng)為width:100%掀亥。
第二步 寫css樣式
（1）main ,左 ,右三個區(qū)塊都設(shè)置左浮動撞反，父元素清除浮動，main區(qū)塊設(shè)置100%铺浇，左右兩區(qū)塊需要定寬痢畜，比如200px;
（2）左區(qū)塊設(shè)置margin-left ：-100%,使其覆蓋main區(qū)塊的左邊區(qū)域。這個-100%是以mian的寬度砍掉兩邊的padding值后的寬度
（3）右區(qū)塊設(shè)置margin-left ：負(fù)自身寬度,使其覆蓋main區(qū)塊的右邊區(qū)域鳍侣。負(fù)邊距起始位置也是main砍掉右邊的padding的位置起算丁稀。
（4）main自身加padding 。.main{ padding: 0 200px;} 倚聚，讓父容器的3個區(qū)塊往中間擠线衫。
（5）用相對定位position:relative,leftright.讓左右兩個區(qū)塊在不脫離文檔流的情況下偏移位置，拉出自身寬度惑折，覆蓋到父元素的padding上授账。同時保證左右兩區(qū)塊移動時候不遮擋中間。
問題2：雙飛翼布局的原理? 實現(xiàn)步驟?
雙飛翼和圣杯也是先設(shè)置三欄元素全部float惨驶，左右兩欄添加負(fù)邊框讓其和中間元素擠在一行白热。圣杯用的是padding和相對定位，雙飛翼的不同是粗卜，比如雙飛翼的main中多了一層div嵌套屋确，把margin拿到內(nèi)層上去，在內(nèi)部嵌套中設(shè)置左右margin，然后另外兩個模塊分別用負(fù)邊距拉到指定位置攻臀。
