前端面试页面布局——五种三栏布局的实现即其优缺点

页面布局

题目：假设已知高度，请写出三栏布局，其中左栏，右栏宽度各为300px，中间自适应

浮动布局

问题：

• 元素浮动以后是脱离文档流的，若处理不好会带来问题

优点：

• 兼容性十分好

html

<!-- 浮动解决方案 -->
  <section class="layout float">
    <article class="left-right-center">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <h1>浮动解决方案</h1>
        1.这是三栏布局的中间部分
        1.这是三栏布局的中间部分
        1.这是三栏布局的中间部分
      </div>
    </article>
  </section>

css

	.layout article div {
      min-height: 100px;
    }
    /* 浮动布局========== start=================== */
    .layout.float .left {
      float: left;
      width: 300px;
      background: rosybrown;
    }

    .layout.float .right {
      float: right;
      width: 300px;
      background: royalblue;
    }

    .layout.float .center {
      background: yellow;
    }

绝对定位布局

问题：

• 布局是脱离文档流的，那下面的子元素也必须脱离文档流

优点：

• 快捷，配合js使用很快，不容易出问题

html

<section class="layout absolute">
    <article class="left-right-center">
      <div class="left"></div>
      <div class="center">
        <h1>绝对定位方案</h1>
        1.这是三栏布局的中间部分
        1.这是三栏布局的中间部分
        1.这是三栏布局的中间部分
      </div>
      <div class="right"></div>
    </article>
  </section>

css

	.layout.absolute .left-right-center>div {
      position: absolute;
    }

    .layout.absolute .left {
      left: 0;
      width: 300px;
      background: rgb(44, 151, 212);
    }

    .layout.absolute .center {
      right: 300px;
      left: 300px;
      background: rgba(150, 22, 201, 0.5);
    }

    .layout.absolute .right {
      right: 0;
      width: 300px;
      background: springgreen;
    }

flex布局

问题：

• 没有太多问题，哈哈隔~

优点：

• 比较完美，移动端基本使用flex布局

html

<section class="layout flexbox">
    <article class="left-right-center">
      <div class="left"></div>
      <div class="center">
        <h1>弹性布局方案</h1>
        1.这是三栏布局的中间部分
        1.这是三栏布局的中间部分
        1.这是三栏布局的中间部分
      </div>
      <div class="right"></div>
    </article>
  </section>

css

    .layout.flexbox .left-right-center {
      display: flex;
    }

    .layout.flexbox .left {
      width: 300px;
      background: violet;
    }

    .layout.flexbox .center {
      flex: 1;
      background: lightblue;
    }

    .layout.flexbox .right {
      width: 300px;
      background: yellowgreen;
    }

表格布局

问题：

• 对SEO不友好，麻烦，操作有点繁琐

优点：

• 兼容性很好
• 三栏会同时增高和降低（也可能是缺点~）

html

<section class="layout table">
    <article class="left-right-center">
      <div class="left"></div>
      <div class="center">
        <h1>表格布局方案</h1>
        1.这是三栏布局的中间部分
        1.这是三栏布局的中间部分
        1.这是三栏布局的中间部分
      </div>
      <div class="right"></div>
    </article>
  </section>

css

	.layout.table .left-right-center {
      width: 100%;
      display: table;
      height: 100px;
    }
    .layout.table .left-right-center>div{
      display: table-cell;
    }
    .layout.table .left{
      width: 300px;
      background: lightslategray;
    }
    .layout.table .center{
      background: rgb(223, 19, 145);
    }
    .layout.table .right{
      width: 300px;
      background: mediumblue;
    }	

网格布局

问题：
emmmm基本没有…
优点：
可以做复杂的事，同时代码量也不多,是新技术
html

<section class="layout grid">
    <article class="left-right-center">
      <div class="left"></div>
      <div class="center">
        <h1>网格布局方案</h1>
        1.这是三栏布局的中间部分
        1.这是三栏布局的中间部分
        1.这是三栏布局的中间部分
      </div>
      <div class="right"></div>
    </article>
  </section>

css

	.layout.grid .left-right-center{
      display: grid;
      width: 100%;
      grid-template-rows: 100px;
      grid-template-columns: 300px auto 300px;
    }
    .layout.grid .left{
      background: red;
    }
    .layout.grid .center{
      background: rgb(44, 151, 212);
    }
    .layout.grid .right{
      background: rgb(197, 35, 17);
    }	

界面展示

个人推荐使用

• float布局
• flex布局
• grid布局

具体还需结合实际情况使用

当然还有其他的布局方式，就靠大家自己探索了~