前端面试题之布局

面试题之布局解决方案
前端面试的时候关于布局方面总是会问这样一个问题—假设已知高度，完成三栏布局，两边栏，定宽，中间栏自适应宽度。
对于这个问题，第一个想法就是利用浮动、定位来完成，但是对于面试题，只回答出来这两种往往是不够的。那么仔细的思考一下会再想到利用表格布局来实现，虽说表格布局已经不怎么采用，但是对于这个问题的解决还是很方便的。再一个解决方案就是利用flexbox。能答出来这四种解决方案已经是不错了，但是为了体现出你对新技术的关注和追求，就需要答出第5种解决方案了，即利用网格布局来实现。
那么接下来我们就介绍这5中解决方案，以及简单总结它们各自的优缺点。
1、利用浮动

    <style>        .layout.float .left{            float:left;            width:300px;            background-color:red;        }        .layout.float .right{            float:right;            width:300px;            background-color:blue;        }        .layout.float .center {            background-color:orange;        }    </style>    <section class="layout float">        <!-- 利用浮动解决布局时，center必须在最后。 -->        <article class="left-right-center">            <div class="left"></div>            <div class="right"></div>            <div class="center">                <h1>浮动布局</h1>                1.这是浮动布局解决方案                2.这是浮动布局解决方案            </div>        </article>    </section>

浮动的缺点是造成元素脱离文档流，如果处理不好，后边的元素会塌陷，但是浮动的兼容性比较好，并且容易实现，在处理好与周边元素的关系的情况下，浮动还是很好的选择，也是大部分情况下采用的方案。

2、利用绝对定位

<style type="text/css">            .layout.absolute .left-center-right>div{                position: absolute;            }            .layout.absolute  .left{                left: 0;                width: 300px;                background-color: red;            }            .layout.absolute  .center {                left: 300px;                right: 300px;                background-color: orange;            }            .layout.absolute  .right{                right: 0;                width: 300px;                background-color: blue;            }        </style>    <section class="layout absolute">        <article class="left-center-right">            <div class="left"></div>            <div class="center">                <h1>绝对定位</h1>                1.这是绝对定位布局解决方案                2.这是绝对定位布局解决方案            </div>            <div class="right"></div>        </article>    </section>

绝对定位呢我们都知道，同浮动一样也是会脱离文档流，而且，绝对定位最致命的就是以后的元素也必须脱离，在不是整个页面都用定位的情况下还是不建议使用这个方案。

3、利用表格（table）

        <style type="text/css">            .layout.table {                width: 100%;                display: table;            }            .layout .left-center-right>div {                display: table-cell;            }            .layout .left{                width: 300px;                background-color: red;            }            .layout .center {                background-color: orange;            }            .layout .right {                width: 300px;                background-color: blue;            }        </style>    <section class="layout table">        <article class="left-center-right">            <div class="left"></div>            <div class="center">                <h1>表格布局</h1>                1.这是表格布局解决方案                2.这是表格布局解决方案            </div>            <div class="right"></div>        </article>    </section>

利用表格布局，它的兼容性可以说是非常好，老版本的浏览器也能支持。但是表格在有某一块超出设定宽的时候，其他的两块都会随着变化，一直保持着等高的状态，除非设定高度，但是有些情况下我们是不需要等高的。

4、利用flexbox

        <style type="text/css">            .layout .left-center-right{                display: flex;            }            .layout .left {                width: 300px;                background-color: red;            }            .layout .center {                /*flex 属性用于指定弹性子元素如何分配空间*/                flex: 1;                background-color: orange;            }            .layout .right{                width: 300px;                background-color: blue;            }        </style>    <section class="layout flexbox">        <article class="left-center-right">            <div class="left"></div>            <div class="center">                <h1>flexbox</h1>                1.这是flexbox布局解决方案                2.这是flexbox布局解决方案            </div>            <div class="right"></div>        </article>    </section>

flexbox是一个相对来说完美的解决方法，但是兼容性不是太强，毕竟是是css3的新型布局模式，但是flexbox灵活多变可以使用不同尺寸的屏幕布局要求。

5、利用网格布局(grid)

        <style type="text/css">            .layout.grid .left-center-right{                display: grid;                width: 100%;                grid-template-rows: 100px;                grid-template-columns: 300px auto 300px;            }            .layout .left {                background-color: red;            }            .layout .center {                background-color: orange;            }            .layout .right {                background-color: blue;            }        </style>    <section class="layout grid">        <article class="left-center-right">            <div class="left"></div>            <div class="center">                <h1>网格布局</h1>                1.这是网格布局解决方案                2.这是网格布局解决方案            </div>            <div class="right"></div>        </article>    </section>

利用网格布局可以说是目前最简单的方案，仅仅4行代码就完成了这个效果。那么什么是网格布局呢？对此我也是一知半解，就不做过多解释，等深入的研究学习，有自己的理解后再来分享，不过可以给大家一个参考的地方，CSS Grid布局：什么是网格布局

同样的类型，比方说上中下三栏，上下固定高，中间栏自适应。这种也是很常见的布局类型。还有两栏的布局，左边固定宽，右边自适应，反过来的情况，等等。希望大家能多思考，有自己的独特的想法和观点。
作者也只是一名前端小学生，不足以及错误之处，望各位看官多提出自己的意见，共同进步~