2016/5/31
問答題：
1.負邊距在讓元素產生偏移時和position: relative有什么區別?
- 負邊距讓元素發生偏移的時候是直接改變了元素在文檔流中的位置，影響周邊元素的位置，周邊的元素會跟著一起動。
-
position:relative 沒有改變元素在文檔流中的位置，只是相對于自身原來的位置發生了偏移，不會影響其他的元素。
原來的狀態：
0_1464510810536_upload-02b75474-143e-4a04-b17d-00e1d52e6f6c
加position:relative之后，沒有影響box2:
0_1464510953291_upload-277dae4a-9260-40c2-8878-e025e8eaca81
用負margin，box2的位置也發生了偏移
0_1464511071202_upload-cc6afcad-febb-4f16-a508-d0e5ead83548
2.使用負 margin 形成三欄布局有什么條件?
- 三欄要放在一個父容器中，三欄都要浮動，父容器要清浮動。
- 左右兩欄要固定寬度，中間的內容欄設置寬度為100%，和父級相同
- 通過設置負margin-left值是邊欄位于內容欄里面的左右部，分別為100%，和自身寬度。
- 主體設置padding值，再給邊欄設置定位位移，或者通過將中間主體內容放在一個容器里，通過設置容器左右的margin值，來實現左右邊欄不會覆蓋內容欄
3.圣杯布局的原理是怎樣的? 簡述實現圣杯布局的步驟
- 圣杯布局的原理是為了中間內容不被遮擋，寬度自適應，將兩個側邊欄和內容包含在一個容器中，利用主容器的padding和側邊欄的相對定位與負邊距來實現三欄布局。
- 圣杯布局的步驟：
1.主容器清浮動，三欄都要設置浮動。
2.側邊欄固定好寬度，內容欄即中間欄寬度設置為100%。
3.左側邊欄設置margin-left:-100%.（依據父級寬度）
4.右側邊欄設置 margin-left:-100px.(即它自身的寬度)
上面3,4步使得左右側邊欄分別在中間欄內部的左右側
5.主容器設置padding值
6.側邊欄設置相對定位和定位值
4.雙飛翼布局的原理? 實現步驟?
- 雙飛翼布局的原理也是為了使中間內容不被遮擋，寬度自適應，直接在中間div中創建div放置內容，在孩子div中利用左右margin為兩側留出位置。
- 實現步驟：
1.主容器清浮動，三欄都要設置浮動。
2.側邊欄固定好寬度，內容欄即中間欄寬度設置為100%。
3.左側邊欄設置margin-left:-100%.（依據父級寬度）
4.右側邊欄設置 margin-left:-100px.(即它自身的寬度)
上面3,4步使得左右側邊欄分別在中間欄內部的左右側
5.在中間欄里面嵌套一個div,并且給這個容器設置margin的左右值，為兩側留出位置。
