兩邊寬度固定，中間自適應的布局實作總結（重點學習網格布局）

實作左右欄寬度各為300px，中間自適應

浮動屬性 float：

float 主要為了實作圖文環繞的效果；因為float具有不完全脫離檔案流的特性，雖然脫離了檔案流但是仍然會保留文字的占用空間；

float 會導致容器高度塌陷，因為在計算容器高度時會忽略浮動元素；

float 會為元素添加塊級域，例：當給行內元素添加浮動就可以給行內元素設定寬/高屬性，

  <div class="container">
      <style>
        .container {
          width: 1024px;
          margin: 30px auto;
        }
        .left {
          float: left;
          width:300px;
          background: red;
          height: 150px;    
        }
        .right {
          float: right;
          width:300px;
          background: red;
          height: 150px;    
        }
        .mid {
          height: 150px;
          overflow: auto;
        }
      </style>
      <span class="left"></span>
      <div class="right"></div>
      <div class="mid">
        <h1>浮動解決方案</h1>
		  這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
		  這是三欄布局中間部分
		  這是三欄布局中間部分
      </div>
    </div>

定位absolute: 完全脫離檔案流

<div class="container2">
        <style>
          .container2 {
            width: 1024px;
            margin: 30px auto;
            position: relative;
          }
          .left2 {
            position: absolute;
            left: 0;
            width:300px;
            height: 150px;   
            background: red; 
          }
          .right2 {
            position: absolute;
            right: 0;
            width:300px;
            height: 150px;   
            background: red; 
          }
          .mid2 {
            height: 150px;
            padding: 0 300px;
            overflow: auto;
          }
        </style>
        <div class="left2"></div>
        <div class="right2"></div>
        <div class="mid2">
          <h1>定位解決方案</h1>
            這是三欄布局中間部分
            這是三欄布局中間部分
            這是三欄布局中間部分
            這是三欄布局中間部分
            這是三欄布局中間部分
            這是三欄布局中間部分
            這是三欄布局中間部分
            這是三欄布局中間部分
            這是三欄布局中間部分
            這是三欄布局中間部分
            這是三欄布局中間部分
        </div>
    </div>

彈性盒子布局 : display: flex

容器主要屬性：

flex-direction：主軸的方向；row | column；

flex-wrap：是否換行；nowrap | wrap | wrap-reverse；

justify-content：專案在主軸上的對齊方式；flex-start | flex-end | center | space-between | space-around ；

應用：單項使用center屬性能實作水平居中；兩項使用space-between能實作左右排布，

align-items：專案在交叉軸上的對齊方式；flex-start | flex-end | center | baseline | stretch;

應用：單項使用center屬性能實作垂直居中，

   <div class="container3">
      <style>
        .container3 {
            width: 1024px;
            margin: 30px auto;
            display: flex;
          }
          .left3, .right3 {
            width:300px;
            height: 150px;   
            background: red; 
          }
          .mid3 {
            flex: 1;
            height: 150px;
            overflow: auto;
          }
      </style>
      <div class="left3"></div>
      <div class="mid3">
          <h1>彈性盒子解決方案</h1>
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
      </div>
      <div class="right3"></div>
    </div>

表格布局: display: table && display: table-cell （查看display: cell的應用）

1. 表格的單元格可以設定vertical-align: center 實作垂直居中；

應用：多行文字垂直居中，或者高度不固定的元素垂直居中；

2. 寬度自動調節的自適應布局；

應用：經典兩列自適應布局，帶搜索按鈕的搜索組件；

3. 表格的單元格最大的特點之一就是同一行串列元素都等高；

應用：等高串列布局；

       <div class="container4">
          <style>
            .container4 {
                width: 1024px;
                display: table;
                margin: 30px auto;
              }
              .left4,.right4 {
                display: table-cell;
                width:300px; 
                height: 150px;
                background: red; 
              }
              .mid4 {
                display: table-cell;
              }
          </style>
          <div class="left4"></div>
          <div class="mid4">
              <h1>浮動解決方案</h1>
              這是三欄布局中間部分
              這是三欄布局中間部分
              這是三欄布局中間部分
              這是三欄布局中間部分
              這是三欄布局中間部分
              這是三欄布局中間部分
              這是三欄布局中間部分
              這是三欄布局中間部分
              這是三欄布局中間部分
              這是三欄布局中間部分
              這是三欄布局中間部分
          </div>
          <div class="right4"></div>
        </div>

網格布局: display: grid （重點學習，太厲害了）

   <div class="container5">
      <style>
        .container5 {
          width: 1024px;
          margin: 30px auto;
          display: grid;
          grid-template-columns: 300px auto 300px;
          grid-template-rows: 150px;
        }
        .right5,.left5 {
          background: red;
        }
      </style>
      <div class="left5"></div>
      <div class="mid5">
          <h1>網格布局解決方案</h1>
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
      </div>
      <div class="right5"></div>
    </div>