一、負(fù)邊距在讓元素產(chǎn)生偏移時(shí)和position: relative有什么區(qū)別?
1.負(fù)邊距會改變元素在文檔流中的位置攀隔，而且相鄰的元素位置也會被改變。
2.position:relative相對定位栖榨，會使自身元素發(fā)生偏移昆汹，但是之前占用的文檔流位置繼續(xù)保留，相鄰元素的位置不受影響婴栽。
二满粗、使用負(fù) margin 形成三欄布局有什么條件?
1.左右側(cè)邊欄和居中的主內(nèi)容區(qū)塊均為浮動的塊級元素。
2.主內(nèi)容區(qū)塊放在最前面（文檔流優(yōu)先渲染）愚争，左右側(cè)邊欄隨后败潦。
3.左側(cè)邊欄需設(shè)置負(fù)margin-left為100%，右側(cè)邊欄需設(shè)置margin-left為元素本身的寬度准脂。
三劫扒、圣杯布局的原理是怎樣的? 簡述實(shí)現(xiàn)圣杯布局的步驟
1.原理:圣杯布局是指左右兩邊側(cè)邊欄寬度固定，中間主內(nèi)容區(qū)塊寬度自適應(yīng)的布局方式狸膏。左右側(cè)邊欄區(qū)塊和中間主內(nèi)容區(qū)塊均設(shè)置浮動沟饥，然后中間主內(nèi)容區(qū)塊設(shè)置padding，使兩邊留出空白湾戳。左側(cè)邊欄區(qū)塊設(shè)置margin-left:-100%贤旷，右側(cè)邊欄區(qū)塊設(shè)置margin-left值為區(qū)塊本身的寬度再配合相對定位（position:relative）即可。
2.步驟
-
第1步：先寫出圣杯布局的DOM結(jié)構(gòu)（三個(gè)塊級元素包裹在父容器中砾脑，兩邊的側(cè)邊欄寬度固定幼驶，中間的主內(nèi)容區(qū)塊寬度自適應(yīng)）。
第1步 -
第2步：父容器中的三個(gè)塊級元素設(shè)置浮動,并設(shè)置父容器清理浮動韧衣。
第2步 -
第3步：設(shè)置第二個(gè)子元素margin-left:-100%盅藻，第三個(gè)子元素margin-left:-100px，側(cè)邊欄的兩個(gè)子元素會往上覆蓋中間主區(qū)塊元素畅铭。
第3步 -
第4步：設(shè)置父容器的padding:0 100px氏淑，再分別設(shè)置左側(cè)邊欄相對定位position:relative;left:-100px;右側(cè)邊欄相對定位position:relative;left:100px。這樣圣杯布局就完成了硕噩。
第4步
四假残、雙飛翼布局的原理? 實(shí)現(xiàn)步驟?
1.原理：左右兩邊側(cè)邊欄寬度固定，中間主區(qū)塊內(nèi)容寬度自適應(yīng)的布局方式炉擅。跟圣杯布局的不同點(diǎn)在于雙飛翼布局的中間區(qū)塊需要再包裹一個(gè)子元素區(qū)塊做主內(nèi)容辉懒，然后使用margin值撐開兩邊的側(cè)邊欄阳惹，不需要使用相對定位（position:relative）。
2.步驟
-
第1步：先寫出圣杯布局的DOM結(jié)構(gòu)（三個(gè)塊級元素包裹在父容器中眶俩，兩邊的側(cè)邊欄寬度固定穆端，中間的主內(nèi)容區(qū)塊寬度自適應(yīng)）。
第1步 -
第2步：父容器中的三個(gè)塊級元素設(shè)置浮動,并設(shè)置父容器清理浮動仿便。
第2步 -
第3步：設(shè)置第二個(gè)子元素margin-left:-100%体啰，第三個(gè)子元素margin-left:-100px，側(cè)邊欄的兩個(gè)子元素會往上覆蓋中間主區(qū)塊元素嗽仪。
第3步 -
第4步：在主區(qū)塊中再設(shè)置一個(gè)子元素做主內(nèi)容區(qū)塊,并設(shè)置該子元素的左右margin值（值根據(jù)左右側(cè)邊欄區(qū)塊寬度而定）荒勇。雙飛翼布局就完成了。
第4步
