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

  • 負(fù)邊距讓元素產(chǎn)生偏移會(huì)影響后面的元素，因?yàn)樗徽加性瓉淼奈恢?/p>
    

    原本的位置

.div:nth-child(2) {
    margin-top: -30px;
    margin-left: -20px;
}

margin-left

.div:nth-child(2) {
    position: relative:
    top: 30px;
    left: 50px;
}

position: relative;

• 使用負(fù) margin 形成三欄布局有什么條件?
  假設(shè)三欄布局中的中間一欄為main，左邊欄為left，右邊欄為right
  1. 在html結(jié)構(gòu)中，必須main在前面

  <div class="contain">
      <div class="main"></div>
      <div class="left"></div>
      <div class="right"></div>
  </div>
  

  2. 三欄布局中的三個(gè)塊必須先浮動(dòng),因?yàn)閐iv的默認(rèn)是垂直一個(gè)接一個(gè)放置的，必須讓left和right跟隨在main的后面
  3. 中間塊必須width: 100%;因?yàn)椋?
     1. float之后div的寬度是內(nèi)容寬度
     2. 因?yàn)槿龣诓季种械闹虚g一欄需要自適應(yīng)
     3. 必須把left和right頂?shù)较乱恍?/li>
  4. left的margin-left: -100%;，right的margin-left的值為本身寬度的負(fù)數(shù)
• 圣杯布局的原理是怎樣的? 簡(jiǎn)述實(shí)現(xiàn)圣杯布局的步驟
  圣杯布局的目的是使中間欄的內(nèi)容得以先渲染，原理是利用浮動(dòng)加負(fù)margin來實(shí)現(xiàn)三欄布局，然后在#contain上加padding，再把兩個(gè)邊欄用相對(duì)定位移到正確的位置
  1. 先寫好html的結(jié)構(gòu)，注意中間欄要在兩個(gè)邊欄的前面

  <div id="header"></div>
  <div id="contain">
      <div class="main"></div>
      <div class="sub"></div>
      <div class="extra"></div>
  </div>
  <div id="footer"></div>
  

  2. 設(shè)置main的寬度100%，三個(gè)div左浮動(dòng)

  #contain>div {
      height: 300px;
      float: left;
  }
  
  .main {
      width: 100%;
      background-color: #e65454;
  }
  
  .sub,.extra {
      width: 200px;
  }
  

2016-08-03_005106.png

3. 把兩個(gè)邊欄移動(dòng)到正確的位置
```
.sub {
    background-color: #03A9F4;
    margin-left: -100%;
}

.extra {
    background-color: #4CAF50;
    margin-left: -200px;
}
```

2016-08-03_005929.png

4. 讓內(nèi)容能正確顯示不被兩個(gè)邊欄覆蓋
```
#contain {
    overflow: hidden;
    padding: 0 200px;
}
.sub {
    background-color: #03A9F4;
    margin-left: -100%;
    position: relative;
    left: -200px;
}

.extra {
    background-color: #4CAF50;
    margin-left: -200px;
    position: relative;
    left: 200px;
}
```

2016-08-03_005902.png

• 雙飛翼布局的原理? 實(shí)現(xiàn)步驟?
  雙飛翼布局的目的是使中間欄的內(nèi)容得以先渲染，原理是利用浮動(dòng)加負(fù)margin來實(shí)現(xiàn)三欄布局，相比圣杯布局，雙飛翼布局的區(qū)別在于最后正確顯示內(nèi)容的方式
  • 寫html結(jié)構(gòu)，注意雙飛翼布局在main下還有一個(gè)顯示內(nèi)容的div

  <div id="header"></div>
  <div id="contain">
      <div class="main">
          <div class="content"></div>
      </div>
      <div class="sub"></div>
      <div class="extra"></div>
  </div>
  <div id="footer"></div>
  

  • 和圣杯布局一樣利用浮動(dòng)+負(fù)外邊距得到三欄布局

    
    
    2016-08-03_005623.png
  • 讓內(nèi)容能正確顯示不被兩個(gè)邊欄覆蓋，這里是圣杯布局和雙飛翼布局的區(qū)別，雙飛翼布局不適用main來顯示內(nèi)容，而是在main下新建一個(gè)div，設(shè)置屬性margin-left和margin-right來達(dá)到正確顯示內(nèi)容的目的

  .content {
      margin-left: 200px;
      margin-right: 200px;
  }
  

2016-08-03_010935.png