面試官：請實現三欄佈局，儘量多的方式。

在面試中咱們常常會被問到一個簡單的問題，那就是"實現一個三欄佈局，左右固定，中間自適應"。這個問題就是考察知識點就是頁面佈局，咱們是實際的項目開發中，也常常會遇到這個問題。其實我發現一個前端開發人員有一個通病，包括我本身也是，"以爲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>
複製代碼

優勢：黑科技。

缺點：代碼太多了，記不住呀。