CSS（五）圣杯，双飞翼布局

双飞翼布局

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .main{
      width: 100%;
      height: 200px;
      background: pink;
      float: left;
    }
    .content{
      padding: 0 200px;
    }
    .left{
      height: 200px;
      width: 200px;
      background: blue;
      float: left;
      margin-left: -100%;
    }
    .right{
      width: 200px;
      height: 200px;
      background: yellow;
      float: left;
      margin-left: -200px;
    }
  </style>

  <div class="main">
    <div class="content">
      ...
    </div>
  </div>
  <div class="left"></div>
  <div class="right"></div>

     这里用到了  负边距    先写中间的部分  有一部分原因 也是因为  中间部分要优先显示    

圣杯布局

    *{
      margin: 0;
      padding: 0;
    }
    .content{
      width: 100%;
      padding: 0 200px;
    }
    .main{
      width: 100%;
      height: 200px;
      background: red;
      float: left;
    }
    .left{
      width: 200px;
      height: 200px;
      background: pink;
      float: left;
      margin-left: -100%;
      position: relative;
      left: -200px;
    }
    .right{
      width: 200px;
      height: 200px;
      background: blue;
      float: left;
      margin-left: -200px;
      position: relative;
      right: 200px;
    }

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

圣杯 与 双飞翼布局的  区别是  content 标签 在哪里     双飞翼在 main 里面     这样 content  需要  有 padding  如果 中间这部分  不止一个 content  就要写 多个  padding  这样   不划算   也很不方便  

所以圣杯   是 双飞翼 的升级版      其实也差不多    就是  content 在最外层   原理和 双飞翼一样  都是  负边距       他是 给最外层的  content 设置  了  padding   里面 仍然是  双飞翼  不过  就是  让 ‘’翅膀‘’  通过 reletave 定位 来  补上  content padding 空出来的部分