从一道题看面试中的页面布局

从一道题看页面布局。

先介绍下自己，目前还是一名在校大学生，前端菜鸟一枚。目前正在准备春招，所以也做了很多的准备。当然在准备的过程中，我们要举一反三，从一道题中延伸出更多的知识点，不断完善我们的知识体系。今天我们以一道题来看看页面布局能延伸出哪些知识，欢迎和我一起在准备春招的同学来一起学习，也欢迎各位大佬前来鞭策。

来看一道题目：假定三栏布局的高度已知，其中左右栏的宽度分别时300px，中间宽度自适应，请写出布局方式。

首先假定我们现在正在面试，大家先想一想这道题目可以有几种解决方案？
在脑海中首先想到的解决方案应该是：浮动布局和应用绝对定位的方式去解决。那么这两种解决方案就可以令面试官满意了么？我认为这两种基本的方法可能连及格线都不够。那么还有那些布局方式呢？做过移动端开发的应该都知道flex布局，如果有关注过比较新一点的技术那么就应该知道grid布局，还有一种比较老的布局方式就是table布局。
那么知道这些解决方案就够了么？当然不是，你还要了解这道题有那些延伸，延伸的问题在后续会列出一些！好，废话不说了，我们先看下这几种解决方案。

1.浮动布局：

在进行回答时，首先我们应该注意到几点注意事项：HTML语义化，代码的规范化，CSSreset等等。

<section class="layout float">
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h1>浮动的解决方案</h1>
            <p>这是布局的中间部分</p>
        </div>
    </artcle>
</section>
<style>
    .layout article div{
        min-height: 100px;
    }
    .layout.float .left{
        float: left;
        width: 300px; 
        background-color: red;
    }
    .layout.float .right{
        float: right;
        width: 300px;
        background-color: yellow;
    }
    .layout.float .center{
        background-color: blue;
    }
</style>

这种布局方式很简单，但是存在一些潜在的问题，这些问题我会在后续一一列出。

2.绝对定位布局

这个布局方式的关键一点就是中间部分距离左侧300右侧300，就达到了自适应的要求。

<section class="layout absolute">
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h1>绝对定位解决方案</h1>
            <p>这是三栏布局的中间部分</p>
        </div>
        <div class="right"></div>
    </article>
</section>
<style>
    .layout article div{
        min-height: 100px;
    }
    .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: blue;
    }
    .layout.absolute .right{
        right: 0;
        width: 300px;
        background-color: yellow;
    }
</style>

3.flex布局

那么我们来看看目前比较常用的flex布局。如果我们不考虑对IE的兼容性，我认为flex布局方式是一种非常好的布局。有关flex布局的基础知识大家可以看阮一峰老师的文章.

 <section class="layout flex">
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h1>flex布局解决方案</h1>
            <p>这是三栏布局的中间部分</p>
        </div>
        <div class="right"></div>
    </article>
</section>
<style>
    .layout.flex .left-center-right{
        display: flex; //在容器元素声明使用flex布局
    }
    .layout.flex .left{
        width: 300px;
        background-color: red;
    }
    .layout.flex .center{
        flex: 1; //中间自适应
        background-color: blue;
    }
    .layout.flex .right{
        width: 300px;
        background-color: yellow;
    }
</style>

4.grid（栅格化）布局

这种布局方式是一种比较新的布局方式，代码量大大减少，而且现在已经纳入了CSS草案中。如果大家对这方面的知识不了解的话可以看下我写的一个小例子，也可以自行查阅资料。

<section class="layout grid">
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h1>栅格化定位解决方案</h1>
            <p>这是三栏布局的中间部分</p>
        </div>
        <div class="right"></div>
    </article>
</section>
<style>
    .layout.grid .left-center-right{
        display: grid; //声明为grid布局
        width: 100%;
        grid-template-rows: 100px; //高度设置成100px
        grid-template-columns: 300px auto 300px; //宽度分别设置300px auto 300px
    }
    .layout.grid .left{
        background-color: red;
    }
    .layout.grid .center{
        background-color: blue;
    }
    .layout.grid .right{
        background-color: yellow;
    }
</style>

5.表单/格布局

表单布局是一种比较老的布局方式，现在已经很少有人用了，但是也是一种解决方案，尤其在针对有兼容性的特殊要求时，表格布局就是一种非常好的选择。

<section class="layout table">
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h1>表单定位解决方案</h1>
            <p>这是三栏布局的中间部分</p>
            </div>
       <div class="right"></div>
    </article>
</section>
<style>
    .layout.table .left-center-right{
        width: 100%;
        display: table;
        height: 100px;
    }
    .layout.table .left-center-right>div{
        display: table-cell;
    }
    .layout.table .left{
        width: 300px;
        background-color: red;
    }
    .layout.table .center{
        background-color: blue;
    }
    .layout.table .right{
        width: 300px;
        background-color: yellow;
    }
</style>

代码写完了，我们就来看看最后的效果吧。

大家可以自行尝试来书写代码，也可以去我的Github上去看。

重点来了：

作为这道题来说，那么这5种解决方案列出来了就完事了么？当然不是，那我们来看看以这道题为例看看问题怎么延伸。

5种方案各自有什么优缺点？(比如第一种方式会出现浮动引起的外溢，绝对定位会造成后续的元素的位置问题，flex布局的兼容性......)
如果高度是未知的，那么几种方案那个还可以使用？
这几种方案的兼容性如何，在PC端和移动端分别使用那种布局方式？
浮动问题中清除浮动的情况，延伸出BFC等等等等？
针对上述问题大家可以自己思考，来看看关于页面布局的知识体系是否完善。

这种题还有很多变种：

上下高度固定，中间自适应（移动端常见）
左侧定宽右侧自适应。
右侧定宽左侧自适应。
上部定宽下部自适应。
下部定宽上部自适应。
以上题目大家可以自己手动去尝试下。

今天就到这儿吧，如果本文对大家（尤其是和我一样正在准备面试的同学们）有帮助的话欢迎大家给我的Github点赞。祝大家新年快乐^_^

转载请注明出处~

农码一生为了谁

从一道题看页面布局面试会考什么