面试官：请实现三栏布局，尽量多的方式。

在面试中咱们常常会被问到一个简单的问题，那就是"实现一个三栏布局，左右固定，中间自适应"。这个问题就是考察知识点就是页面布局，咱们是实际的项目开发中，也常常会遇到这个问题。其实我发现一个前端开发人员有一个通病，包括我本身也是，"以为CSS不是很重要，不须要深刻的学习"，这实际上是一个比较糟心的想法。在项目中常常出现错乱的布局，可是并不知道缘由。因此咱们今天来简单总结一下有那些方式能够实现三栏布局。

1、浮动布局

<template>
    <div class="box">
        <div class="left">1</div>
        <div class="right">3</div>    
        <div class="content">2</div>
    </div>
</template>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    .box > div {
        min-height: 100px;
    }
    .left {
        float: left;
        width: 100px;
        background: red;
    }
    .content {
        background: yellow;
    }
    .right {
        float: right;
        width: 100px;
        background: blue;
    }
</style>
复制代码

这种布局方式是利用浮动脱离文档流实现的，这里须要特别注意一下，left、right都在content前面布局，若是按照正常的顺序left-content-right，中间元素造成定位，那么就会将right顶下去。没法实现三栏布局。

浮动元素特征：脱离文档流，容许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。 也就是说，若是一个父盒子中有两个子元素，其中一个子元素浮动，若另外一个元素为块级元素，则会无视浮动元素， 被浮动元素覆盖；若另外一个元素为内联元素，则会环绕浮动元素。

优势：兼容性好。

缺点：元素脱离文档流，产生浮动。

2、定位布局

<template>
    <div class="box">
        <div class="left">1</div>
        <div class="content">2</div>
        <div class="right">3</div>    
    </div>
</template>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    .box {
        position: relative;
    }
    .box > div {
        min-height: 100px;
        position: absolute;
    }
    .left {
        left: 0px;
        width: 100px;
        background: red;
    }
    .content {
        left: 100px;
        right: 100px;
        background: yellow;
    }
    .right {
        right: 0px;
        width: 100px;
        background: blue;
    }
</style>
复制代码

优势：简单，适合快速开发页面。

缺点：元素脱离文档流，致使后面的元素也会脱离文档流，可以使用性比较差。

3、flex布局

<template>
    <div class="box">
        <div class="left">1</div>
        <div class="content">2</div>
        <div class="right">3</div>    
    </div>
</template>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    .box {
        display: flex;
    }
    .box > div {
        min-height: 100px;
    }
    .left {
        width: 100px;
        background: red;
    }
    .content {
        flex: 1;
        background: yellow;
    }
    .right {
        width: 100px;
        background: blue;
    }
</style>
复制代码

优势：开发简单易上手。

缺点：这在移动端开发很是常见，但PC端IE8不兼容。

4、table布局

<template>
    <div class="box">
        <div class="left">1</div>
        <div class="content">2</div>
        <div class="right">3</div>    
    </div>
</template>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    .box {
        display: table;
        width: 100%; 
        min-height: 100px;
    }
    .box > div {
        display: table-cell;
    }
    .left {
        width: 100px;
        background: red;
    }
    .content {
        background: yellow;
    }
    .right {
        width: 100px;
        background: blue;
    }
</style>
复制代码

优势：兼容性好。

缺点：曾经风靡一时，可是如今基本被放弃了。

5、gird布局

<template>
    <div class="box">
        <div class="left">1</div>
        <div class="content">2</div>
        <div class="right">3</div>    
    </div>
</template>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    .box {
        display: grid;
        grid-template-columns: 100px 1fr 100px;
    }
    .box > div {
        min-height: 100px;
    }
    .left {
        background: red;
    }
    .content {
        background: yellow;
    }
    .right {
        background: blue;
    }
</style>
复制代码

优势：简单。两行关键代码搞定。

缺点：兼容性差。

6、浮动布局第二种方式。

<template>
    <div class="box">
        <div class="left">1</div>
        <div class="content">2</div>
        <div class="right">3</div>    
    </div>
</template>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    .box > div {
        min-height: 100px;
    }
    .left {
        float: left;
        width: 100px;
        background: red;
        position: relative;
        z-index: 9999;
    }
    .content {
        float: left;
        width: 100%;
        margin-left: -100px;
        background: yellow;
        padding: 0 100px;
        /* z-index: 1; */
        position: relative;
    }
    .right {
        float: left;
        width: 100px;
        margin-left: -100px;
        background: blue;
        z-index: 1;
        position: relative;
    }
</style>
复制代码

优势：黑科技。

缺点：代码太多了，记不住呀。