css 圣杯布局 和 双飞翼布局

一、圣杯布局

• 圣杯布局的要求：随着页面宽度的变化，三栏布局中的中间盒子优先自适应渲染，两边盒子宽度固定不变

• 要求：
  1、两边固定，中间自适应；
  2、先加载middle内容；
  3、三列等高布局；

   <!-- 圣杯布局 -->
   <div class="wrap">
   <div id="header">header</div>
   <div id="content">
       <div id="middle">
       <p>middle</p>
       <p>middle</p>
       <p>middle</p>
       </div>
       <div id="left">left</div>
       <div id="right">right</div>
   </div>
   <div id="footer">footer</div>
  

实现步骤：

1. 布局：有头，有尾，有内容，middle部分要放在content的最前部分，然后是left，reight；

2. 浮动让三者在一行，出现高度塌陷，content清浮动；

3. middle宽度设为100%，占满；

4. left上去，拉到最左边：margin-left: -100%; right同理：margin-left:-200px;

5. middle内容被left、right覆盖未显示，所以把middle内容拉回来，content:{padding: 0 200px};

6. 此时lefe和right都跟着被拉回来了，左右空出了200px。所以用相对定位把left,right拉回来；

   .wrap{
       min-width: 600px;
   }
   #header,#footer{
       height: 50px;
       width: 100%;
       border: 1px solid;
       background-color: grey;
   }
   #content{ 
     overflow: hidden;
     padding: 0px 200px;
   }
   #left,#right{
     width: 200px;
     height: 200px;
     background-color:pink;
   }
   #middle{
     background-color: green;
     width: 100%;
   }
   #middle,#left,#right{
     float: left;
     padding-bottom: 10000px;
     margin-bottom: -10000px;
   }
   #left{
     margin-left: -100%;
     position: relative;
     left: -200px;
   }
   #right{
     margin-left: -200px;
     position: relative;
     left: 200px;
   }
   

二、双飞翼布局

• 需求和圣杯布局是一样的；

• 据说双飞翼是玉伯大大提的，思路是：middle是鸟的身体，left和right是鸟的翅膀，先把主要的东西middle放好，再将翅膀移到合适的位置；

    <!-- 双飞翼布局 -->
    <!-- html,middle中增加了middle-inner -->
    <div class="wrap">
        <div id="header">header</div>
        <div id="content">
          <div id="middle">
            <div class="middle-inner">
              middle
            </div>
          </div>
          <div id="left">left</div>
          <div id="right">right</div>
        </div>
        <div id="footer">footer</div>
      </div>
  

实现步骤：

1. 布局：有头，有尾，有内容，middle部分要放在content的最前部分，然后是left，reight；

2. 浮动让三者在一行，出现高度塌陷，content清浮动；

3. middle宽度设为100%，占满；

4. left上去，拉到最左边：margin-left: -100%; right同理：margin-left:-200px;

5. 以上，都和圣杯布局一样；

6. 因为现在middle的内容被left和right覆盖了，我们除了考虑设置外围content的padding之外，还可以考虑用margin把middle拉过来；

7. 在middle中加一个内部元素middle-inner，设置其margin:0 200px;

   .wrap{
    	min-width: 600px;
   }
   #header,#footer{
       height: 50px;
       width: 100%;
       border: 1px solid;
       background-color: grey;
   }
   #left,#right{
     width: 200px;
     height: 200px;
     background-color:pink;
   }
   #middle{
     background-color: green;
     width: 100%;
   }
   #middle,#left,#right{
     float: left;
     padding-bottom: 10000px;
     margin-bottom: -10000px;
   }
   #content{
     overflow: hidden;
   }
   #left{
     margin-left: -100%;
   }
   #right{
     margin-left: -200px;
   }
   .middle-inner{
     margin: 0 200px;
   }