前端面试题之布局

面试题之布局解决方案
前端面试的时候关于布局方面总是会问这样一个问题—假设已知高度，完成三栏布局，两边栏，定宽，中间栏自适应宽度。
对于这个问题，第一个想法就是利用浮动、定位来完成，但是对于面试题，只回答出来这两种往往是不够的。那么仔细的思考一下会再想到利用表格布局来实现，虽说表格布局已经不怎么采用，但是对于这个问题的解决还是很方便的。再一个解决方案就是利用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布局：什么是网格布局

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

前端面试题之布局

猜你喜欢