1.負邊距在讓元素產(chǎn)生偏移時和position: relative有什么區(qū)別?
<li>負邊距移動時，其原本位置所占空間會和元素一起移動滞诺，也就是說會改變后面元素的位置。
<li>position: relative 是相對于元素原本的位置移動环疼，其特性是不脫離文檔流习霹，所以其原本位置所占空間還會保留，不會影響到后面的元素炫隶。
2.使用負 margin 形成三欄布局有什么條件?
1.三欄都必須浮動淋叶。
2.布局順序是中左右。
3.圣杯布局與雙飛翼布局的原理是怎樣的? 區(qū)別是什么伪阶，簡述步驟煞檩。
<li>圣杯布局的原理是利用了負margin可以使元素上移的特性，通過給父元素添加padding撐開父元素栅贴，再定位子元素的位置斟湃。
步驟：
1.設定三欄浮動。
2.使用負margin使元素上移檐薯。
3.用padding撐開父元素凝赛。
4.用相對定位調(diào)整元素位置，以脫離中間欄。
<li>雙飛翼布局與圣杯布局原理大致相同墓猎，都是利用了負margin可以使元素上移的特性捆昏，不同的是雙飛翼布局通過增加了一個div來達到目的。
步驟：
1.設定三欄浮動陶衅。
2.使用負margin使元素上移屡立。
3.給中欄增加一個div，設置左右margin搀军，將原本中欄的顏色刪除膨俐。
區(qū)別：
圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊頂寬罩句，中間自適應的三欄布局焚刺，中間欄要在放在文檔流前面以優(yōu)先渲染。
圣杯布局和雙飛翼布局解決問題的方案在前一半是相同的门烂，也就是三欄全部float浮動乳愉，但左右兩欄加上負margin讓其跟中間欄div并排，以形成三欄布局屯远。不同在于解決”中間欄div內(nèi)容不被遮擋“問題的思路不一樣蔓姚。
通俗的話講慨丐，圣杯布局是：“我就在這坡脐，你們想上來房揭，自己往邊上走⊥北”
雙飛翼布局是：“好好好你們厲害我給你們讓位置∨钛鳎”
本文版權(quán)歸本人和饑人谷所有泻骤，轉(zhuǎn)載請注明來源梧奢。
