1.負(fù)邊距在讓元素產(chǎn)生偏移時(shí)和position: relative有什么區(qū)別?
使用負(fù)邊距會改變元素在文檔流中的位置，并且相鄰元素的位置也會受影響。而設(shè)置position：relative之后，元素自身會發(fā)生偏移，但是它在文檔流中占據(jù)的空間仍會保留，相鄰元素的位置不會受影響。
例：
2. 使用負(fù) margin 形成三欄布局有什么條件?
- 三欄均為浮動(dòng)的塊級元素，且父元素要設(shè)置清除浮動(dòng)
- 主內(nèi)容區(qū)塊放在最前面，左右側(cè)欄放其后
- 左側(cè)邊欄需設(shè)置margin-left為-100%，右側(cè)邊欄需設(shè)置margin-left為它本身寬度的負(fù)值
3. 圣杯布局的原理是怎樣的? 簡述實(shí)現(xiàn)圣杯布局的步驟
原理：使用負(fù)邊距使得左右兩側(cè)欄寬度固定，中間主區(qū)塊寬度自適應(yīng)的布局方式。左右側(cè)邊欄和中間主區(qū)塊均設(shè)置浮動(dòng)，然后中間主區(qū)塊設(shè)置padding使得兩側(cè)留出空白。左側(cè)邊欄需設(shè)置margin-left為-100%，右側(cè)邊欄需設(shè)置margin-left為它本身寬度的負(fù)值然后再使用相對定位使得左、右邊距能夠流向預(yù)定的位置。
步驟：
- 第一步：寫出圣杯布局的DOM結(jié)構(gòu)（三個(gè)塊級元素包裹在父容器中，兩邊的側(cè)邊欄寬度固定，中間的主內(nèi)容區(qū)塊寬度自適應(yīng)）。
第一步
- 第二步：對三個(gè)區(qū)塊設(shè)置浮動(dòng)，并且父容器要清除浮動(dòng)。
第二步
- 第三步：設(shè)置第二個(gè)子元素margin-left:-100%，第三個(gè)子元素margin-left:本身寬度的負(fù)值，側(cè)邊欄的兩個(gè)子元素會往上覆蓋中間主區(qū)塊元素。
第三步
- 第四步：最后設(shè)置父容器的padding;然后使用定位，使左右欄流入相應(yīng)的位置，這樣圣杯布局就完成了。
第四步
4. 雙飛翼布局的原理? 實(shí)現(xiàn)步驟?
原理：雙飛翼布局跟圣杯布局的不同點(diǎn)在于，它不是用主區(qū)塊中設(shè)置padding來形成三欄的方式，而是在其中間區(qū)塊中包裹一個(gè)子元素區(qū)塊做主內(nèi)容，再對這個(gè)子元素設(shè)置外邊距的值來形成三欄。
步驟：
- 第一步：寫出雙飛翼布局的DOM結(jié)構(gòu)
第一步
- 第二步：對三個(gè)區(qū)塊設(shè)置浮動(dòng)，并且父容器要清除浮動(dòng)。
第二步
- 第三步：設(shè)置第二個(gè)子元素margin-left:-100%，第三個(gè)子元素margin-left:本身寬度的負(fù)值，側(cè)邊欄的兩個(gè)子元素會往上覆蓋中間主區(qū)塊元素。
第三步
-第四步：在主區(qū)塊中設(shè)置一個(gè)子元素作主區(qū)塊內(nèi)容，并設(shè)置該子元素的左右margin值（值根據(jù)左右側(cè)邊欄區(qū)塊寬度而定）。這樣雙飛翼布局就完成了。
第四步
本文版權(quán)歸本人及饑人谷所有，轉(zhuǎn)載請注明出處。
