面试官:请实现三栏布局,尽可能多的方式。

4,984 阅读4分钟

在面试中我们经常会被问到一个简单的问题,那就是"实现一个三栏布局,左右固定,中间自适应"。这个问题就是考察知识点就是页面布局,我们是实际的项目开发中,也经常会遇到这个问题。其实我发现一个前端开发人员有一个通病,包括我自己也是,"觉得CSS不是很重要,不需要深入的学习",这其实是一个比较糟心的想法。在项目中经常出现错乱的布局,但是并不知道原因。所以我们今天来简单总结一下有那些方式可以实现三栏布局。

一、浮动布局

<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顶下去。无法实现三栏布局。

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

优点:兼容性好。

缺点:元素脱离文档流,产生浮动。

二、定位布局

<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>

优点:简单,适合快速开发页面。

缺点:元素脱离文档流,导致后面的元素也会脱离文档流,可使用性比较差。

三、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不兼容。

四、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>

优点:兼容性好。

缺点:曾经风靡一时,但是现在基本被放弃了。

五、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>

优点:简单。两行关键代码搞定。

缺点:兼容性差。

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

<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>

优点:黑科技。

缺点:代码太多了,记不住呀。