前端知识点（七）：三栏布局--两端宽度固定，中间宽度自适应

方法一：浮动

<div class="m1">
     <div class="left">left1</div>
     <div class="right">right</div>
     <div class="main">main</div>
</div>

左右模块各自左右浮动，中间模块设置margin使宽度自适应。中间模块最后加载。

 .m1 {
      width:100%;
      .left {
        width: 100px;
        background: bisque;
        float: left;
      }
      .main {
        background: pink;
        margin: 0 100px;
      }
      .right {
        float: right;
        width: 100px;
        background: yellow;
      }  
  }

方法二：绝对定位

左右模块设置绝对定位，中间模块设置margin宽度自适应，中间模块最后加载。

<div class="m2">
     <div class="left">left2</div>
     <div class="right">right</div>
     <div class="main">main</div>
</div>

.m2 {
      width: 100%;
      position: relative;
      .left {
        position: absolute;
        left: 0;
        width: 100px;
        background: bisque;
      }
      .main {
        background: pink;
        margin: 0 100px;
      }
      .right {
        position: absolute;
        right: 0;
        width: 100px;
        background: yellow;
      }
    }

方法三：Flex布局

父盒子设置为display:flex;中间模块设置为flex:1;使中间模块宽度自适应。

<div class="m3">
    <!--Flex布局-->
     <div class="left">left3</div>
     <div class="main">main</div>
     <div class="right">right</div>
</div>

  .m3 {
      width: 100%;
      display: flex;
      .left {
        width: 100px;
        background: bisque;
      }
      .main {
        flex: 1;
        background: pink;
      }
      .right {
        width: 100px;
        background: yellow;
      }
    }

方法四：table布局

父元素设置为display:table;(块级表格显示)，子元素设置display:table-cell;(作为一个表格单元格显示)

<div class="m4">
     <!-- table布局 -->
     <div class="left">left4</div>
     <div class="main">main</div>
     <div class="right">right</div>
</div>

.m4 {
      width: 100%;
      display: table; //作为块级表格显示
      > div {
        display: table-cell; //作为一个表格单元格显示
      }
      .left {
        width: 100px;
        background: bisque;
      }
      .main {
        background: pink;
      }
      .right {
        width: 100px;
        background: yellow;
      }
    }

方法五：网格布局

在父元素中设置display:grid;//网格布局显示  grid-template-columns:100px auto 100px;//列的尺寸

 <div class="m5">
        <!-- 网格grid布局 -->
        <div class="left">lef5</div>
        <div class="main">main</div>
        <div class="right">right</div>
 </div>

.m5 {
      width: 100%;
      display: grid; //网格布局
      grid-template-columns: 100px auto 100px; //设置网格每列的尺寸
      .left {
        width: 100px;
        background: bisque;
      }
      .main {
        background: pink;
      }
      .right {
        width: 100px;
        background: yellow;
      }
    }

方法六：margin负值

中间模块优先加载，

父元素设置margin：0 100px;

子元素设置左浮动，

左边模块设置margin-left:-100px;position:relative;left:-100px;(相对定位+margin左负值)

右边模块设置margin-right:-100px;(margin右负值)

 <div class="m6">
        <!-- margin负值-->
          <div class="main">main</div>
          <div class="left">left6</div>
          <div class="right">right</div>
 </div>

 .m6 {
        margin: 0 100px;
        > div {
          float: left;
        }
        .left {
          margin-left: -100%;
          position: relative;
          left: -100px;

          width: 100px;
          background: bisque;
        }
        .main {
          width: 100%;
          background: pink;
        }
        .right {
          margin-right: -100px;
          width: 100px;
          background: yellow;
        }
    }

方法七：calc函数布局

子元素：设置为左浮动

中间模块宽度设置为：calc(100% - 200px)

 <div class="m7">
        <!-- calc函数布局-->
        <div class="left">left7</div>
        <div class="main">main</div>
        <div class="right">right</div>
      </div>

 .m7 {
      //  calc布局
      width: 100%;
      >div{
        float: left;
      }
      .left {
        width: 100px;
        background: bisque;
      }
      .main {
        width: calc(100% - 200px);
        background: pink;
      }
      .right {
        width: 100px;
        background: yellow;
      }
    }