双飞翼布局与圣杯布局完全解读

一、两种布局的目的

   使得左右两边的宽度不随着浏览器窗口的变化而变化，是固定的，只有中间的部分才可以随着窗口变化而变化。

二、两种布局的要点

    经典圣杯布局通过父亲padding给左右俩腾位置从而不会遮住middle内容，而双飞翼是通过设置margin，限制内部内容区域，从而不会影响到中间的内容。

三、圣杯布局代码 

<!--圣杯布局重点结构就是中间的部分 顺序是center排在最前面 方面后面调整left right位置
    因为left right都排在center后面 这样很容易调整上去 如果left right排在center前面 很难调整位置
--> 
<div id="header">header</div>
    <div id="container" class="clearfix">
      <div id="center" class="column">center</div>
      <div id="left" class="column">left</div>
      <div id="right" class="column">right</div>
    </div>
    <div id="footer">footer</div>
 </body>

 body {
        min-height: 500px;
      }
 #container {
       /*用padding压缩center的大小 相当于缩了边界*/
        padding-left: 200px;
        padding-right: 190px;
 }
   .column {
        float: left;
 }
 #center {
        width: 100%;
        background-color: red;
}
 #left {
        width: 200px;
        background-color: pink;
        /*-100% 百分比是以父元素的宽度计算 向左100%是走到父元素的左边界*/
        margin-left: -100%;
        position: relative;
        /*再向左走一个left这个盒子的宽度 正好填补左边的空缺*/
        left: -200px;
  }
 #right {
        width: 190px;
        background-color: green;
        /*margin-right的对齐标准是自身 在这里如果用margin-left*/ 
        /*会造成盒子直接对齐父元素的右边界*/
       /*是因为margin-left的对齐标准是父元素*/
        margin-right: -190px;
  }
  #header {
        width: 100%;
        text-align: center;
        background-color: yellowgreen;
      }
   #footer {
        width: 100%;
        text-align: center;
        background-color: gray;
 }
  .clearfix::after {
        display: table;
        content: "";
        clear: both;
      }

 

 

                                                 图一：如果在圣杯布局中的right部分使用margin-left

四、双飞翼布局代码

 

<!--同样也是center在最前面 不过这次需要用margin隐性的扩展自己的边界
    所以需要一个center-wrap
-->
<div id="center" class="col">
          <div id="center-wrap">
              this is center
          </div>
    </div>
    <div id="left" class="col">
        this is left

    </div>
    <div id="right" class="col">
        this is right
</div>

 

body{
       min-height: 500px;
   }
   .col{
       float: left;
   }
   #center{
       width: 100%;
       height: 200px;
       background-color: red;
       text-align: center;
   }
   #center-wrap{
      /*用margin隐性的扩展自己的边界*/
      margin :0 190px 0 200px;
   }
   #left{
       width: 200px;
       height: 200px;
       background-color: green;
       margin-left: -100%;
   }
   #right{
       width: 190px;
       height: 200px;
       background-color: pink;
       /*这次因为父元素的边界被扩展了 所以用margin-left就可以达到效果*/
       margin-left: -190px;
   }