首先，無論是圣杯布局還是雙飛翼布局，負(fù)邊距都起著非常重要的作用，我寫在這里是為了提醒自己。
1.負(fù)邊距在讓元素產(chǎn)生偏移時和position: relative有什么區(qū)別?
對相鄰元素的影響
<li>負(fù)邊距移動時，它自身整個文檔位置也會跟著偏移，以至于后面的元素也會做出相應(yīng)調(diào)整。
<li>使用position:relative進(jìn)行偏移時，它還會占著原來的位置，后面元素的位置不會受影響。
定位方式
<li>首先邊距的定位是從規(guī)定元素的border到父元素或者相鄰元素的距離，所以負(fù)邊距的偏移是以父元素/相鄰元素的邊框為參考線。
<li>position:relative則以自身原來位置做參考線。
2.使用負(fù) margin 形成三欄布局有什么條件?
1.左側(cè)邊欄，中間內(nèi)容區(qū)域，右側(cè)邊都要添加左浮動。
2.中間main自適應(yīng)父元素寬度。
3.父元素添加padding為左右側(cè)邊欄預(yù)留空位。（圣杯布局）
4.在中間元素添加一個子元素，并且子元素左右設(shè)置邊距。（雙飛翼布局）
3.圣杯布局的原理是怎樣的? 簡述實現(xiàn)圣杯布局的步驟
原理：
圣杯布局其特性是，左右側(cè)邊寬度固定，中間main自適應(yīng)父元素寬度，而父元素設(shè)置左右padding為左右側(cè)邊欄預(yù)留位置的一種布局。
實現(xiàn)步驟：
1：
html寫出父元素container，子元素main，aside，extra。
css設(shè)置aside，extra固定寬度，main寬度自適應(yīng)。
2:
main，aside，extra設(shè)置左浮動，然后在父容器使用偽元素after清除浮動。
3:
aside設(shè)置margin-left:-100%;，extra設(shè)置margin-left:-200px;父元素設(shè)置左右padding:200px;
4
aside設(shè)置position:relative; right:200px
extra設(shè)置position:relative; left:200px
4.雙飛翼布局的原理? 實現(xiàn)步驟?
雙飛翼布局原理
雙飛翼布局原理是在main外層添加wrap父容器，然后通過設(shè)置wrap的左右margin，從而達(dá)到布局效果。
步驟：
1.設(shè)置container父容器，子元素main，aside，extra，然后在main再設(shè)置一個子元素warp。
2.同樣main自適應(yīng)父元素寬度，aside，extra有固定寬度，然后都左浮動。
3.使用偽元素after清除浮動，然后左側(cè)欄負(fù)邊距設(shè)置為-100%，右側(cè)欄負(fù)邊距為其寬度的相反數(shù)。
4.設(shè)置warp左右邊距大于或者等于asider和extra即可。
代碼題
<a >代碼1</a>
<a >代碼2</a>
<a >代碼3</a>
<a >代碼4</a>
<a >代碼5</a>
本教程版權(quán)歸饑人谷peter和饑人谷所有，轉(zhuǎn)載須說明來源！
感謝吃瓜子觀眾：
