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

實作左右欄寬度各為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>

定位 position: 完全脫離檔案流

<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 {
            height: 150px;
            flex: 1;
            overflow: auto;
          }
      </style>
      <div class="left3"></div>
      <div class="mid3">
          <h1>浮動解決方案</h1>
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
          這是三欄布局中間部分
      </div>
      <div class="right3"></div>
    </div>

表格布局: display: table-cell，還能實作等高，等寬布局

table表格中的單元格最大的特點之一就是同一行串列元素都等高，

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