css 三栏布局

三栏布局就是如上图所示-- 左右宽度固定，中间自适应

8种方式：

1、浮动+margin 2、浮动+BFC 3、Flex 4、table 5、绝对定位 6、圣杯布局 7、双飞翼布局 8、grid 栅栏布局

实现方案：

1、浮动+margin

Dom结构：

<div class="container">
 <div class="left"></div>
 <div class="right"></div>
 <div class="main"></div>
<div>

css 样式:

        .left {
            background-color: red;
            float: left;
            width: 200px;
            height: 100vh;
        }

        .right {
            background-color: blue;
            float: right;
            width: 200px;
            height: 100vh;
        }

        .main {
            background-color: green;
            margin: 0 200px;
            height: 100vh;
        }

2、浮动+BFC

Dom结构：

<div class="container">
 <div class="left"></div>
 <div class="right"></div>
 <div class="main"></div>
<div>

css 样式:

        .left {
            background-color: red;
            float: left;
            width: 200px;
            height: 100vh;
        }

        .right {
            background-color: blue;
            float: right;
            width: 200px;
            height: 100vh;
        }

        .main {
            background-color: green;
            overflow: hidden;//触发BFC
            height: 100vh;
        }

3、Flex

Dom结构：

<div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>

css 样式:

       .container{
       display: flex;
       height: 100vh;
       }
       .left{
       width: 200px;
       background-color: blue;
       }
       .right{
       width: 200px;
       background-color: green;
       }
       .main{
       flex: 1;
       background-color:red ;
       }

4、table

Dom结构：

<div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>

css 样式:

       .container {
            display: table;
            height: 100vh;
            width: 100vw;
        }

        .left {
            display: table-cell;
            width: 200px;
            background-color: blue;
        }

        .right {
            display: table-cell;
            width: 200px;
            background-color: green;
        }

        .main {
            display: table-cell;
            background-color: red;
        }

5、绝对定位

Dom结构：

   <div class="container">
      <div class="left"></div>
      <div class="right"></div>
      <div class="main"></div>
    </div>

css 样式:

      .container {
        position: relative;
      }

      .left {
        position: absolute;
        width: 200px;
        height: 100vh;
        left: 0;
        background-color: blue;
      }

      .right {
        position: absolute;
        right: 0;
        width: 200px;
        height: 100vh;
        background-color: green;
      }

      .main {
        background-color: red;
        height: 100vh;
        margin: 0 200px;
      }

6、圣杯布局

Dom结构：

   <div class="container">
      <div class="main"></div>
      <div class="left"></div>
      <div class="right"></div>
    </div>

css 样式:

      .container{
          margin: 0 200px;
          height: 100vh;
      }
      .left {
        width: 200px;
        float: left;
        background-color: blue;
        height: 100%;
        margin-left: -100%;
        position: relative;
        left: -200px;
      }

      .right {
       float: left;
       width: 200px;
       height: 100%;
       background-color: green;
       margin-left: -200px;
       position: relative;
        right: -200px;
      }

      .main {
        float: left;
        width: 100%;
        height: 100%;
        background-color: red;
      }

7、双飞翼布局

Dom结构：

    <div class="content">
      <div class="main"></div>
      </div>
      <div class="left"></div>
      <div class="right"></div>

css 样式:

        .left {
        width: 200px;
        float: left;
        background-color: blue;
        margin-left: -100%;
        height: 100vh;
      }

      .right {
       float: left;
       width: 200px;
       background-color: green;
       margin-left: -200px;

        height: 100vh;
      }
     .content{
         float: left;
         width: 100%;
     }
      .main {
        margin: 0 200px;
        background-color: red;
        height: 100vh;
      }

以上是我从 前端菌告诉你们前端最简单易懂的CSS三栏布局，_哔哩哔哩_bilibili 这个视频中学习到，总结出来的

8、grid 网格布局

Dom结构：

    <div class="container">
    <div></div>
    <div></div>
    <div></div>
    </div>

css 样式:

       div{
        height: 100vh;
      }
      .container{
        width: 100vw;
        height: 100vh;
        display: grid;
        grid: auto-flow / 200px auto 200px;
      }
      .container div:first-child{
      background-color: blue;

      }
      .container div:nth-child(2){
        background-color: red;
      }
      .container div:last-child{
        background-color: blue;
      }