1. 負邊距在讓元素產生偏移時和position: relative有什么區別?
- 文檔流中的位置是否保留
- 使用負邊距偏移的元素，下一個元素會追隨其后
- 使用position:relative的元素，下一個元素不會跟隨
- 參考線或是參考點不同
- 邊距規定元素的border到父元素/相鄰元素邊框的距離，所以負邊距的偏移是以父元素/相鄰元素的邊框為參考線
- position:relative則是以元素原在位置的四個頂點為參考點進行偏移
2. 使用負 margin 形成三欄布局有什么條件?
使用負margin實現三欄布局的條件：
- 兩個側邊欄需要添加浮動屬性
- 中間的main部分的寬度要自適應父元素寬度
- 父容器需要添加左右padding為sidebar預留空間
3. 圣杯布局的原理是怎樣的? 簡述實現圣杯布局的步驟
圣杯布局原理
圣杯布局是三欄布局之一，基本特性是左右側邊欄寬度固定，中間main寬度自適應，獨特之處是父容器添加padding-left和right撐開其寬度而為2個側邊欄預留放置空間。一般中間主內容首先渲染有利于SEO
實現步驟
step1:寫好三欄結構
Paste_Image.png
step2:設置好初始樣式: (main元素也要浮動，否則不起作用！)
Paste_Image.png
step3: 設置外容器左右padding和邊欄的負margin:
Paste_Image.png
tep4:設置相對位置 :
Paste_Image.png
step5:如果想改成兩欄布局,只需刪除多余的部分:
Paste_Image.png
4. 雙飛翼布局的原理? 實現步驟?
原理:
雙飛翼布局也是一個兩邊在父容器里固定寬度，中間自適應的布局.一般中間主內容首先渲染有利于SEO。
設置三個浮動div，左右兩欄加上負margin 100%使其和中間欄頂端的邊緣重合。中間欄用一個內置的div來放置內容，在這個子div里設置了margin來給兩邊的div留出了位置。
步驟:
step1:寫好三欄結構,在主內容中增加一個內容區warp
0_1468275826270_upload-b5c5559a-16ae-418f-8abb-9ead344e1eff
step2:設置好初始樣式:
0_1468276720403_upload-4bab0808-0923-4d6a-9df7-e4b7eea6bb88
step3:設置warp的margin留出邊欄位置,設置邊欄負margin:
0_1468277209341_upload-a2225d29-9df5-45a2-b524-02543ab10bec
step4:如果想改成兩欄布局,只需刪除多余的部分:
0_1468277759101_upload-3d450c6e-f261-45ef-8944-0f458d63d7a2
