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

• position:relative：相對定位，實際占據(jù)空間未變化，即元素本身在正常文檔流中的記憶位置不會發(fā)生變化；
• 負(fù)margin：元素偏移，元素偏移后，元素在正常文檔流中的位置發(fā)生改變，之后的普通流元素位置也會跟著改變；

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

• 父容器包裹三欄，父容器清除浮動，三欄添加浮動；
• 中間主體欄寬度自適應(yīng)100%,兩側(cè)欄寬度固定；

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

• 基本原理：用負(fù)margin實現(xiàn)float元素同行，父容器添加左右margin預(yù)留空白，再將浮動元素使用相對定位解決重疊問題；
• 具體步驟（三欄圣杯）：
  • html：父容器包裹三個子元素，第一個子元素為寬度自適應(yīng)，后兩個元素需寬度固定；
  • css：
    1. 三個子元素浮動，父容器清除浮動，全部元素清除margin、padding；
    2. 寬度固定元素使用負(fù)margin實現(xiàn)三個子元素float到一行，
       第二個子元素負(fù)100%，第三個子元素負(fù)自身寬度；
    3. 父容器添加左右padding，寬為后兩個子元素的對應(yīng)寬度，預(yù)留空白區(qū)域；
    4. 第二個、第三個子元素使用相對位移，使其占用預(yù)留的空白區(qū)域；

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

• 基本原理：用負(fù)margin實現(xiàn)float元素同行，主體內(nèi)容區(qū)域加容器并給容器添加margin預(yù)留空白，再將浮動元素使用相對定位解決重疊問題；
• 具體步驟（三欄雙飛翼）：
  • html：父容器包裹三個子元素，第一個子元素添加單獨父容器，第一個子元素為寬度自適應(yīng)，后兩個元素需寬度固定；
  • css：
    1. 三個子元素浮動，父容器清除浮動，全部元素清除margin、padding；
    2. 寬度固定元素使用負(fù)margin實現(xiàn)三個子元素float到一行，
       第二個子元素負(fù)100%，第三個子元素負(fù)自身寬度；
    3. 第一個子元素單獨父容器添加左右margin，寬為后兩個子元素的對應(yīng)寬度，預(yù)留空白區(qū)域；
    4. 第二個、第三個子元素使用相對位移，使其占用預(yù)留的空白區(qū)域；

五、代碼題

1. 用浮動、負(fù)邊距實現(xiàn)如下效果 參考:
   

• 答：代碼12-1

2. 使用圣杯布局實現(xiàn)如下三欄布局(兩側(cè)固定寬度200px,中間自適應(yīng))

   
   

• 答：代碼12-2

3. 使用圣杯布局的思路實現(xiàn)如下兩欄布局

   
   

• 答：代碼12-3

4. 使用雙飛翼布局實現(xiàn)如下三欄布局(兩側(cè)固定寬度200px,中間自適應(yīng))

   
   

• 答：代碼12-4

5. 使用雙飛翼布局的思路實現(xiàn)如下兩欄布局

   
   

• 答：代碼12-5

　　　　　　　　聲明：本博客教程版權(quán)歸蘭文聰和饑人谷所有，轉(zhuǎn)載需說明來源！