問答

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

答：

• position: relative的偏移并沒有造成文檔流的脫離，所以不會對后續(xù)元素造成偏移的影響，而負邊距會造成后續(xù)元素的偏移。
• 負邊距與position: relative的區(qū)別DEMO

2. 使用負 margin 形成三欄布局有什么條件?

答：

• 三欄布局必須都是是浮動元素
• 父元素必須清除浮動

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

答：

• 通過負邊距與父容器的padding值來實現(xiàn)左右欄固定與中間主內(nèi)容自適應的布局
• 1. HTML結(jié)構(gòu)

<!--html結(jié)構(gòu)-->
<div class="container">
        <!--優(yōu)先渲染主內(nèi)容區(qū)-->
        <div class="main"></div> 
        <div class="side-L"></div>
        <div class="side-R"></div>
</div>

2. CSS設置，main side-L side-R設置浮動，container 清除浮動設置padding值，side-L設置負邊距100%移動到內(nèi)容區(qū)的左邊，side-R設置負邊距為自身的寬度，偏移到主內(nèi)容區(qū)的右邊。

/*css結(jié)構(gòu)*/
.container{
        padding: 0 200px 0 200px; /*給左右邊欄預留出200px的寬度*/
}
.side-L,.main,.side-R{
        float: left; /*實現(xiàn)三欄布局的要求*/
}
.side-L{
        margin-left:-100%; /*移動父元素的100%的寬度*/
}
.side-R{
        width: 200px;
        margin-left: -200px; /*移動到主內(nèi)容區(qū)域的右方*/
}

DEMO

3. CSS設置 .side-L .side-R 的position:relative屬性，.side-L 的 left: -200px，.side-R的left:200px，就可以實現(xiàn)左右兩欄固定，中間主要部分自適應的圣杯布局。
   DEMO

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

答：

• 和圣杯布局相像，在主內(nèi)容區(qū)添加一個包裹層浮動，然后內(nèi)容區(qū)設置外邊距即可，左右欄不必添加position屬性設置。

<!--html結(jié)構(gòu)-->
<div class="container"> 
<!--優(yōu)先渲染主內(nèi)容區(qū)--> 
      <div class="m-wrapper">
          <div class="main"></div> 
      </div>
      <div class="side-L"></div> 
      <div class="side-R"></div>
</div>

• 設置.main的外邊距值實現(xiàn)雙飛翼布局
  DEMO