一、負邊距在讓元素產生偏移時和position: relative有什么區別?
- 負margin和
position: relative在讓元素產生偏移時都沒有脫離文檔流。但是利用負margin讓元素產生偏移時，元素原來的位置會被占據；而position: relative元素原來的位置不會被占據，仍然會被保留。
對比圖
DEMO - 負margin除了可以移位自己，還可以移動周圍的元素。margin-top和margin-left是移動自己，而margin-right和margin-bottom是讓周圍的元素移動。因為margin的意思就是要讓周圍最近的元素空出多少距離。比如說設置
margin-right: -10px;，就是要讓下一個元素距離當前元素-10px，自然就是下一個元素左移。不然當前元素和它前面的元素的margin-right就不對，會受到影響。而position: relative不會影響到其他的元素。
先來看看margin-left和margin-bottom。
負左外邊距和負下外邊距
DEMO
因為margin-top上面已經給出例子了，再來看看margin-right。
margin-right - 這里還需要注意的一個小技巧是可以利用負margin來擴大面積，這在一些布局中可以應用到。使用條件是，如果一個元素沒有width，只有左右的負margin，那么它就會變寬，可以利用負margin來擴大面積。
DEMO
二、使用負 margin 形成三欄布局有什么條件?
- 三欄放在一個容器中，左右兩邊固定寬度，中間欄寬度100%自適應。
- 利用負margin形成三欄布局，是負margin和浮動聯合使用達到的一個布局效果。所以這里的三欄都要設置左浮動。
- 使用了浮動之后，父容器一定要清除浮動。
- 對左右欄設置負margin，左邊欄設置
margin-left: -100%，右邊欄的margin-left設置自身的寬度。
三、圣杯布局的原理是怎樣的? 簡述實現圣杯布局的步驟。
- 在html中，先把中間的主區塊middle放在容器的最前面，接著是left，最后是right。這樣可以先渲染重要的區塊，有利于搜索引擎優化。
<div class="wrapper">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
- 圣杯布局是實現左右寬度固定，中間自適應。
.main{
width: 100%;
background: blue;
height: 300px;
}
.left{
width: 200px;
height: 300px;
background: red;
}
.right{
width: 150px;
height: 300px;
background: orange;
}
- 將三欄都設置為左浮，這樣兩個側邊欄才能到中間區塊的middle上面去。
.main, .left, .right{
float: left;
}
- 再利用負margin讓左邊欄和右邊欄跑到中間區塊的兩邊。對左邊欄設置
margin-left: -100%，右邊欄的margin-left設置為自身的寬度。這樣兩個側邊欄就會分別覆蓋中間區塊的左右邊。
.left{
margin-left: -100%;
}
.right{
margin-left: -150px; /* 右邊欄自身的寬度 */
}
- 到上一步為止，left和right欄已經到了正確的位置，接下來是要解決覆蓋的問題。圣杯布局的解決方案是先對包裹三欄的容器設置好padding。可以上下為0，左右分別為左右兩欄的寬度。
.wrapper{
padding: 0 150px 0 200px;
}
- 接著，再利用相對定位，把左右兩欄分別移動到對應的padding上去。
.left{
position: relative;
left: -200px;
}
.right{
position: relative;
right: -150px;
}
四、雙飛翼布局的原理? 實現步驟?
- 前面和圣杯布局一樣，中間的主區塊main放在html的最前面，接著是子列sub和附加列extra。然后利用負外邊距讓sub和extra回到正確的位置。
- 接著面臨一個同樣的問題，那就是sub和extra覆蓋了main的左右兩邊的內容。雙飛翼布局就是在main的外部再加一個div標簽來包裹中間區塊，寬度為100%。然后再設置main的左右外邊距，使它回到對應的位置。
html結構：
<div class="wrapper">
<div class="middle">
<div class="main">你好</div>
</div>
<div class="sub"></div>
<div class="extra"></div>
</div>
CSS部分：
.middle .main{
margin-left: 200px;
margin-right: 150px;
}
五、圣杯布局和雙飛翼布局的比較。
- 兩者的相同點：都是讓主區塊的內容先加載；都是左右兩欄固定高度，中間一欄自適應；都是讓三欄設置浮動，再利用負外邊距實現三列布局。
- 兩者的不同點：圣杯布局和雙飛翼布局的不同點就是處理主區塊覆蓋的問題。圣杯布局是利用相對定位，然后設置內邊距padding來實現的，而雙飛翼布局是通過增加一個標簽，再設置外邊距margin來實現的。
對比而言，雙飛翼雖然增加了一個標簽，但是它的思路比較容易理解，也不需要利用定位。而且雙飛翼布局在瀏覽器窗口足夠小的時候不會出現排版錯亂的情況，原因就是當側邊欄寬度大于中間區塊寬度時，側邊欄上不去，會出現錯亂。
六、把圣杯布局和雙飛翼布局改成兩欄布局
實現了三欄布局，兩欄布局就比較簡單了，把右邊欄刪掉就可以。
- 圣杯布局改成兩欄布局
完整DEMO - 雙飛翼布局改成兩欄布局
完整DEMO - 其他不考慮搜索引擎優化的兩欄布局方法：
不考慮搜索引擎優化，也就是不把中間區塊放前面，這樣的兩欄布局實現起來比較簡單。 - 固定寬度的兩欄布局
DEMO - 固定寬度的兩欄布局（浮動）
DEMO - 不固定寬度的兩欄布局（定位）
DEMO - 關于兩欄布局還可以參考之前的博客，就是利用形成BFC的方法。
利用BFC形成兩欄布局
