圣杯布局和双飞翼布局

/*1. 搞一个容器，里面三个盒子
  并且在中间盒子中再加一个盒子
<div class="box">
  <div class="center">
    <div class="center-in"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>
*/
/*2. 设置两边盒子的宽度*/
.left, .right{
    width: 200px;
    height: 200px;
    background-color: red;
    /*5.float: left;*/
}
/*3.设置中间盒子宽度为100%*/
.center{
    width: 100%;
    height: 200px;
    background-color: skyblue;
    /*5.float: left;*/
}
/*4.设置容器的padding为两边盒子的宽度*/
.box{
    padding: 0 200px;
}
/*5.让三个盒子在同一方向浮动*/
.left{
    /*6.设置左边盒子 margin-left: -100%;*/
    margin-left: -100%;
    /*7.通过定位使左边盒子不盖住中间的*/
    position: relative;
    left: -200px;
}
.right{
    /*8.设置右边盒子的margin-left: -自身宽度*/
    margin-left: -200px;
    /*9. 通过定位使右边盒子不盖住中间的*/
    position: relative;
    left: 200px;
}
/*10.设置最小宽度防止缩太小出问题*/
.box{
    min-width: 400px;
}

/*1. 搞一个容器，里面三个盒子
<div class="box">
  <div class="center"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>
*/
/*2. 设置两边盒子的宽度*/
.left, .right{
    width: 200px;
    height: 200px;
    background-color: red;
    /*5.float: left;*/
}
/*3.设置中间盒子宽度为100%*/
.center{
    width: 100%;
    height: 200px;
    background-color: skyblue;
    /*5.float: left;*/
}
/*4.设置中间的里面盒子左右margin为两边盒子宽度*/
.center>.center-in{
    margin: 0 200px;
    height: 200px;
    background-color: yellowgreen;
}
/*5.让三个盒子在同一方向浮动*/
/*6.设置两边盒子位置*/
.left{
    /*7.设置左边盒子 margin-left: -100%;*/
    margin-left: -100%;
}
.right{
     /*8.设置右边盒子的margin-left: -自身宽度*/
    margin-left: -200px;
}