CSS经典布局

一、圣杯布局

1. flex弹性布局

①父盒子设置flex布局

②左右盒子flex属性的拓展和收缩比例为0、1，基准值为内容宽度

③中间盒子flex为1，内容占满剩余空间

    <div class="parent">
      <div class="left side-background">left</div>
      <div class="main main-background">main</div>
      <div class="right side-background">right</div>
    </div>

    .parent {
        display: flex;
        height: 200px;
        .main {
          flex: 1;
        }
        .left, .right {
          flex: 0 1 200px;
        }
      }

2. 绝对定位

①父盒子设置相对定位

②左右盒子设置绝对定位和固定宽度，左边盒子top、left为零靠左，右边盒子top、right为零靠右

③中间盒子设置占位占100%即可

    <div class="parent1">
      <div class="left1 side-background">left</div>
      <div class="main1 main-background">main</div>
      <div class="right1 side-background">right</div>
    </div>

    .parent1 {
        position: relative;
        height: 200px;
        .main1 {
          height: 100%;
          width: 100%;
        }
        .left1, .right1 {
          position: absolute;
          width: 200px;
          height: 100%;
          top: 0;
        }
        .left1 {
          left: 0;
        }
        .right1 {
          right: 0;
        }
      }

3. float浮动布局

①html结构先写中间盒子先渲染

②父盒子设置padding左右为左右盒子宽度，并设box-sizing: border-box;将边框边距包含在width宽度内

③左右、中间三个盒子设置float浮动为left，中间盒子设置宽度为100%占满一行

④左右边盒子margin-left拉至同一行，左边为-100%，右边为-自身宽度

⑤左右边盒设置相对定位和left占据padding部分，左边-自身宽度，右边自身宽度

    <div class="parent2">
      <div class="main2 main-background">main</div>
      <div class="left2 side-background">left</div>
      <div class="right2 side-background">right</div>
    </div>

    .parent2 {
        height: 200px;
        padding: 0 200px;
        box-sizing: border-box;
        &>div {
          float: left;
        }
        .main2 {
          width: 100%;
          height: 200px;
        }
        .left2, .right2 {
          width: 200px;
          height: 200px;
        }
        .left2 {
          margin-left: -100%;
          position: relative;
          left: -200px;
        }
        .right2 {
          margin-left: -200px;
          position: relative;
          left: 200px;
        }
      }

二、双飞翼布局

与圣杯布局类似

①只是中间盒子用一个外盒子包围，且中间盒子设置margin：0 200px外边距左右距离为左右盒子的宽度，避免被遮挡内容

②三个盒子同样设置float浮动，左右设置margin-left即可

    <div class="parent3">
      <div class="main3 main-background">
        <div class="content">content</div>
      </div>
      <div class="left3 side-background">left</div>
      <div class="right3 side-background">right</div>
    </div>

    .parent3 {
        height: 200px;
        &>div{
          float: left;
        }
        .main3 {
          width:100%;
          height: 100%;
          .content{
            margin: 0 200px;
          }
        }
        .left3, .right3 {
          width: 200px;
          height: 200px;
        }
        .left3 {
          margin-left: -100%;
        }
        .right3 {
          margin-left: -200px;
        }
      }

三、table布局

①父盒子设置display:table布局

②三个盒子设置table-cell布局表现如同表格中的单元格

    <div class="parent4">
      <div class="left4 side-background">left</div>
      <div class="main4 main-background">main</div>
      <div class="right4 side-background">right</div>
    </div>

    .parent4 {
        width: 100%;
        height: 200px;
        display: table;
        &>div {
          display: table-cell;
        }
        .left4 {
          width: 200px;
        }
        .right4 {
          width: 200px;
        }
      }

四、calc

①左右两个盒子利用float浮动或定位固定在左右两边

②中间盒子利用calc计算为剩下的空间

    <div class="parent5">
      <div class="left5 side-background">left</div>
      <div class="main5 main-background">main</div>
      <div class="right5 side-background">right</div>
    </div>

    .parent5 {
        height: 200px;
        position: relative;
        .main5 {
          position: absolute;
          left: 200px;
          width: calc(100% - 400px);
          height: 200px;
        }
        .left5, .right5 {
          width: 200px;
          height: 200px;
          position: absolute;
          top:0;
        }
        .left5 {
          left: 0;
        }
        .right5 {
          right: 0;
        }
    }