1.負邊距在讓元素產生偏移時和position: relative有什么區(qū)別?
負邊距偏移會影響相鄰后面的元素往偏移元素的位置擠過來择同，relative不會影響，因為relative后元素在文檔流的位置不會改變净宵。
2.使用負 margin 形成三欄布局有什么條件?
- 父元素中有三個浮動的塊級子元素敲才。
- 填充內容的元素,放在第一個需要在html中最先渲染,設置寬度為100%,將另外兩個元素擠到下一行
- 左右的兩個子元素設置負邊距,跑到上一行
3.圣杯布局的原理是怎樣的? 簡述實現圣杯布局的步驟。
- 原理是中間自適應择葡，兩邊固定寬度紧武。三塊元素都是浮動。
step1:
設置三個左浮動div敏储，box1設置寬度是100%阻星，產生效果為分為 兩行，box1一行已添，box2妥箕，box3一行（因為第一行放不下）。
step2:
然后設置父容器padding-left/right大小為box2更舞，3的寬度畦幢。
step3:
然后設置box2 margin-left：-100% ，設置box3 margin-left：-（自身寬度）缆蝉，效果是蓋在box1的兩邊宇葱。
step4:
為了防止干擾box1里的內容，然后再使用position：relative定位來調整位置刊头，形成如下的效果
圣杯布局實現三欄布局
4.雙飛翼布局的原理? 實現步驟?
- 原理:雙飛翼布局也是一個兩邊在父容器里固定寬度黍瞧，中間自適應的布局.
point是在內容區(qū)塊里面再加個子元素div。
step1:
設置三個左浮動div原杂，box1設置寬度是100%印颤，產生效果為分為 兩行，box1一行污尉，box2膀哲，box3一行（因為第一行放不下）。
step2:
然后設置box2 margin-left：-100% 被碗，設置box3 margin-left：-（自身寬度）某宪，效果是蓋在box1的兩邊。
step3:
在box2也就是main里面锐朴，再加一層div兴喂，用margin-left/right來調整位置，使得兩邊不被左右側邊欄遮擋，來達到你想要的效果衣迷。效果如下:
雙飛翼原理實現三欄布局
本文版權歸作者饑人谷_Josh和饑人谷所有畏鼓，轉載請注明來源