負(fù)邊距在讓元素產(chǎn)生偏移時(shí)和position: relative有什么區(qū)別?

負(fù)邊距在讓元素產(chǎn)生偏移時(shí)，相鄰元素的位置也會(huì)跟著它移動(dòng)。
而position: relative讓元素產(chǎn)生偏移時(shí)，只是改變自身的位置，它在文檔流中原本占用的空間不會(huì)改變，不會(huì)影響其他元素。

使用負(fù) margin 形成三欄布局有什么條件?

• 子容器都要設(shè)置浮動(dòng)
• 父容器要清除浮動(dòng)
• 中間容器寬度要設(shè)為100%（這樣才會(huì)占滿）
• 使用負(fù)margin使左側(cè)欄向左偏移100%（這里的寬度針對父容器），右側(cè)欄向左偏移自身寬度的100%
• 父容器設(shè)置padding值來控制中間欄的寬度
• 用position:relative給左右側(cè)邊欄調(diào)整位置

圣杯布局的原理是怎樣的? 簡述實(shí)現(xiàn)圣杯布局的步驟

實(shí)現(xiàn)原理同上題。
步驟：

1. 寫出頁面結(jié)構(gòu)，父容器包裹左右側(cè)邊欄和中間內(nèi)容欄
2. 三個(gè)容器都設(shè)置浮動(dòng)，并且父容器要清除浮動(dòng)，中間欄寬度設(shè)100%
3. 使用負(fù)margin使左側(cè)欄向左偏移100%（這里的寬度針對父容器），右側(cè)欄向左偏移自身寬度的100%
4. 父容器設(shè)置padding值來控制中間欄的寬度
5. 用position:relative給左右側(cè)邊欄調(diào)整位置
   demo

雙飛翼布局的原理? 實(shí)現(xiàn)步驟?

前面和圣杯是一樣的，區(qū)別只在于最后中間容器寬度的控制方法。

1. 寫出頁面結(jié)構(gòu)，父容器包裹左右側(cè)邊欄和中間內(nèi)容欄
2. 三個(gè)容器都設(shè)置浮動(dòng)，并且父容器要清除浮動(dòng)，中間欄寬度設(shè)100%
3. 使用負(fù)margin使左側(cè)欄向左偏移100%（這里的寬度針對父容器），右側(cè)欄向左偏移自身寬度的100%
4. 在中間容器的內(nèi)部增加一個(gè)div來包裹內(nèi)容，設(shè)置這個(gè)div的左邊距和右邊距為兩個(gè)側(cè)邊欄的寬度，從而給兩邊的側(cè)邊欄空出位置。
   demo

本教程版權(quán)歸作者和饑人谷所有，轉(zhuǎn)載須說明來源！