面試常常考的佈局（CSS佈局 -- 聖盃佈局 & 雙飛翼佈局）

按照個人理解，其實聖盃佈局跟雙飛翼佈局的實現，目的都是左右兩欄固定寬度，中間部分自適應。

在這裏，實現了左(300px) 右(300px) 寬度固定，中間自適應，container部分高度保持一致。

下面我寫了物種經常使用的方式：

通用樣式

html *{
        margin:0;
        padding:0;
      }
      .layout{
        height:200px;
        background:yellow;
        margin-bottom:20px;
        color:#fff;
        font-size:22px;
        line-height:200px;
        text-align:center;
      }
複製代碼

一：float佈局

<!--float佈局-->
      <article class="float layout">
        <div class="left">float佈局-left</div>
        <div class="right">float佈局-right</div>
        <div class="middle">float佈局-middle</div>
      </article>複製代碼

/*float佈局*/
      .float div{
        height:200px;
      }
      .float div.left{
        background:red;
        float:left;
        width:300px;
      }
      .float div.middle{
        background:#000;
      }
      .float div.right{
        background:green;
        float:right;
        width:300px;
      }
複製代碼

二：position 佈局

<!--position佈局-->
      <article class="position layout">
        <div class="left">position佈局-left</div>
        <div class="middle">position佈局-middle</div>
        <div class="right">position佈局-right</div>
      </article>
複製代碼

/*position 佈局*/
      .layout{
        position: relative;
      }
      .position div{
        height:200px;
      }
      .position div.left{
        position: absolute;
        background:red;
        width:300px;
        left:0;
        top:0;
      }
      .position div.middle{
        position: absolute;
        background:#000;
        right:300px;
        top:0;
        left:300px;
      }
      .position div.right{
        position: absolute;
        background:green;
        width:300px;
        right:0;
        top:0;
      }
複製代碼

三：table-cell佈局

<!--table-cell佈局-->
      <article class="table-cell layout">
        <div class="left">table-cell佈局-left</div>
        <div class="middle">table-cell佈局-middle</div>
        <div class="right">table-cell佈局-right</div>
      </article>
複製代碼

/*table-cell佈局*/
      .table-cell{
        display:table;
        width:100%;
      }
      .table-cell div{
        height:200px;
        display:table-cell;
      }
      .table-cell div.left{
        width:300px;
        background:red;
      }
      .table-cell div.middle{
        background:#000;
      }
      .table-cell div.right{
        width:300px;
        background:green;
      }
複製代碼

四：flex 佈局

<!--flex佈局-->
      <article class="flex layout">
        <div class="left">flex佈局-left</div>
        <div class="middle">flex佈局-middle</div>
        <div class="right">flex佈局-right</div>
      </article>
複製代碼

/*flex 佈局*/
      .flex{
        display:flex;
      }
      .flex div{
        height:200px;
      }
      .flex div.left{
        background:red;
        width:300px;
      }
      .flex div.right{
        width:300px;
        background:green;
      }
      .flex div.middle{
        background:#000;
        flex:1;
      }
複製代碼

五：grid 網格佈局

<!--grid網格佈局-->
      <article class="grid layout">
        <div class="left">grid網格佈局-left</div>
        <div class="middle">grid網格佈局-middle</div>
        <div class="right">grid網格佈局-right</div>
      </article>
複製代碼

/*grid 網格佈局*/
      .grid{
        display:grid;
        grid-template-columns: 300px auto 300px;
      }
      .grid div.left{
        background:red;
      }
      .grid div.middle{
        background:#000;
      }
      .grid div.right{
        background:green;
      }
複製代碼

固然了還能夠用其餘方式，這裏只寫了常規的，面試常常會問到，能說出這幾種也仍是不錯的，這個題還能夠延伸，好比Dom渲染順序的調整,須要將middle 自動調整寬度的內容先渲染出來，這樣Dom的順序就必須放在其餘left、right兩個div模塊的前面排第一，這樣你又能寫出幾種。

github地址：github.com/miqidian/la…