前端css中三栏布局的五种实现方式（面试高频题）

1.何为三栏布局?

首先祭出以往面试过程中遇到的题目：一个页面，已知高度，页面分为横向分为三个模块，左右的宽度已知为300px,中间模块的宽度随浏览器视口的伸缩自适应处理。 根据题目，描绘如下图：

2.实现起来有几种方法?

这里大概列举以下五种实现方式，并用代码展示出来

1. 浮动布局（最基本的）
2. 绝对定位布局（面试过程中达到这里只能算是你学会css基础）
3. flex-box布局（能够答到这里的话勉强及格）
4. table及table-cell表格布局（还不错）
5. grid网格布局（比较新的特性，算优秀了）

3.代码实现

  //浮动三杯布局 注意：中间模块不要放在两个浮动元素中间，块元素会造成center占据整行，无法实现效果 
  <section class="layout float">
    <article class="float-contain">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <span>
          浮动布局-自适应展示模块测试
        </span>
      </div>
    </article>
  </section>
    <style>
      .float-contain div{
        height: 100px;
      }
      .float-contain .left{
        width: 300px;
        float: left;
        background-color: aqua;
      }
      .float-contain .right{
        width: 300px;
        float: right;
        background-color: brown;
      }
      .float-contain .center{
        background-color: cornflowerblue;
      }
      
    </style>

<!-- 绝对布局实现 -->
  <section class="layout absolute">
    <article class="absolute-contain">
      <div class="left"></div>
      <div class="center">
        <span>
          绝对定位布局-自适应展示模块测试
        </span>
      </div>
      <div class="right"></div>
    </article>
  </section>
    <style>
      .absolute-contain{
        margin-top: 20px;
      }
      .absolute-contain div{
        height: 100px;
      }
      .absolute-contain .left{
        width: 300px;
        position: absolute;
        left: 0;
        background-color: aqua;
      }
      .absolute-contain .right{
        width: 300px;
        position: absolute;
        right: 0;
        background-color: brown;
      }
      .absolute-contain .center{
        position: absolute;
        left: 300px;
        right: 300px;
        background-color: cornflowerblue;
      }
      
    </style>

<!-- flex-box布局实现 -->
<section class="layout flex">
  <article class="flex-contain">
    <div class="left"></div>
    <div class="center">
      <span>
        flex定位布局-自适应展示模块测试
      </span>
    </div>
    <div class="right"></div>
  </article>
</section>
  <style>
    .flex-contain{
      margin-top: 140px;
      display: flex;
    }
    .flex-contain div{
      height: 100px;
    }
    .flex-contain .left{
      width: 300px;
      background-color: aqua;
    }
    .flex-contain .right{
      width: 300px;
      background-color: brown;
    }
    .flex-contain .center{
      flex: 1;
      background-color: cornflowerblue;
    }
    
  </style>

<!-- table表格布局实现 -->
  <section class="layout table">
    <article class="table-contain">
      <div class="left"></div>
      <div class="center">
        <span>
          table布局-自适应展示模块测试
        </span>
      </div>
      <div class="right"></div>
    </article>
  </section>
    <style>
      .table-contain{
        margin-top: 20px;
        width: 100%;
        display: table;
      }
      .table-contain div{
        height: 100px;
        display: table-cell;
      }
      .table-contain .left{
        width: 300px;
        background-color: aqua;
      }
      .table-contain .center{
        background-color: brown;
      }
      .table-contain .right{
        width: 300px;
        background-color: cornflowerblue;
      }
    </style>

<!-- 网格布局实现 -->
<section class="layout grid">
  <article class="grid-contain">
    <div class="left"></div>
    <div class="center">
      <span>
        grid网格化布局-自适应展示模块测试
      </span>
    </div>
    <div class="right"></div>
  </article>
</section>
  <style>
    .grid-contain{
      margin-top: 20px;
      width: 100%;
    }
    .grid-contain{
      display: grid;
      grid-template-rows: 100px;
      grid-template-columns: 300px auto 300px
    }
    .grid-contain .left{
      background-color: aqua;
    }
    .grid-contain .center{
      background-color: brown;
    }
    .grid-contain .right{
      background-color: cornflowerblue;
    }
  </style>

以上代码效果如下图：

伸缩后：

总结：三栏布局等布局方式是面试官考察css的重点模块，可以说是极其重要的部分，其拓展还有垂直三栏布局，两栏布局等等。（其他情况也有很多种，如果有时间再更这部分模块）