css兩欄佈局、聖盃佈局、雙飛翼佈局

最近幾個月一直用vue在寫手機端的項目，主要寫業務邏輯，在js方面投入的時間和精力也比較多。這兩天寫頁面明顯感受css佈局方面的知識有不足，因此複習一下佈局方法。

兩欄佈局

• 一、浮動

.box1 .left {
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .box1 .right {
    margin-left: 100px;
    height: 100px;
    background-color: green;
  }

<div class="box1">
  <div class="left"></div>
  <div class="right">兩列自適應</div>
</div>

• 二、定位

.box1{
    position: relative;
    width: 100%;
    height: 100px;
  }
  .box1 .left{
    position: absolute;
    width: 100px;
    height: 100%;
    background-color: red;
  }
  
  .box1 .right{
    margin-left: 100px;
    width: 100%;
    height: 100%;
    background-color: green;
  }

<div class="box1">
  <div class="left"></div>
  <div class="right"></div>
</div>

• 三、flex

.box1{
    display: flex;
    height: 100px;
  }
  .box1 .left{
    width: 100px;
    height: 100%;
    background-color: red;
  }
  
  .box1 .right{
    flex:1;
    height: 100%;
    background-color: green;
  }

<div class="box1">
  <div class="left"></div>
  <div class="right"></div>
</div>

聖盃佈局和雙飛翼佈局目的是咱們但願先加載的是中間的部分，而後再開始加載 left 和 right 兩個相對來講不是很重要的東西。

聖盃佈局

聖盃佈局給最外面加padding, 讓 padding-left 和 padding-right 的數值等於left 和 right 的寬度，而後利用相對定位把他們再移動在兩旁。

.box{
    padding:  0 100px;/* 留出左右的距離*/
    height: 100px;
  }
  .box .middle {
    float: left;
    width: 100%;
    height: 100%;
    background-color: yellow;
  }
  .box .left {
    float: left;
    width: 100px;
    margin-left: -100%;
    background-color: red;
    position: relative;
    left: -100px;/*往左拉*/
    height: 100%;
  }
  .box .right {
    float: left;
    width: 100px;
    margin-left: -100px;
    background-color: green;
    position: relative;
    right: -100px;
    height:100%;
  }

<div class="box">
  <!--注意順序-->
  <div class="middle">middle</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

雙飛翼佈局

.box {
    position: relative;
    height: 100px;
  }
  .middle-wrap {
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
  }
  .middle-wrap .middle {
    height: 100%;
    margin: 0 100px; /*留出距離*/
    background-color: yellow;
  }
  .left {
    float: left;
    width: 100px;
    margin-left: -100%;
    height: 100%;
    background-color: red;
  }
  .right {
    float: left;
    width: 100px;
    height: 100%;
    margin-left: -100px;
    background-color: green;
  }

<div class="box">
  <div class="middle-wrap">
    <div class="middle"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>