两边宽度固定，中间自适应的布局实现总结（重点学习网格布局）

实现左右栏宽度各为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>