双飞燕和圣杯

《1》  圣杯布局

    *** 父盒子包含3个子盒子（左，中，右）

                 *其中中间的盒子的宽度设置为100%，独占一行

                 *使用负边距（均是margin-left）把左右两边的盒子都拉上去和中间的盒子同一行

                        1   .left{margin-left:-100%;},把左边的盒子拉上去

                        2    .right{margin-left:  -右边的盒子的宽度 px;}，把右边的盒子拉上去

                *父盒子设置左右的padding来为左右的盒子留位置

                *对左右的盒子使用相对布局来占据padding的空白，避免中间盒子的内容被左右的盒子覆盖

         <!--圣杯的html布局-->

          <div   class="container">

                     <div   class="middle">中间的弹性区 </div>      <!--其中的中间的div必须写在最前面-->

   <div   class="left"> 左边栏</div>

  <div    class="right">右边栏 </div>

         </div>

  《2》双飞翼

         ****父盒子包含3个子盒子（左，中，右），中间的盒子再加一个子盒子呦！

                * 中间的盒子的宽度设置为：100%，独占一行

                *使用负边距（均是margin-left:）把左右两边的盒子都拉上去，和中间的盒子同行

               *在中间的盒子里面再添加一个div，然后对这个盒子设置margin-left和margin-right来为左右两边的盒子留位置

      <!--双飞翼的html布局-->

      

  <div   class="container">

    <!--其中的中间的div必须写在最前面-->

                     <div   class="middle">

   <div  class="middle-inner">中间的弹性区</div>

                      </div>      

   <div   class="left"> 左边栏</div>

  <div    class="right">右边栏 </div>

         </div>

**********************************圣杯和双飞燕的差异*********************（体现在中间的盒子不被左右盒子的遮挡）

    (1) 圣杯布局的方法：设置父盒子的padding值为左右的盒子留出空位，在利用相对布局对左右的盒子调整位置占据padding出来的空位

     (2) 双飞燕的布局方法：在中间的盒子里面在增加一个子盒子，直接设置这个盒子的margin值来让出空位，而不再用调整左右两边的盒子（双飞燕比圣杯多一个div但是不用相对布局）