一道面试题

题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应

答：

1. 浮动布局
2. 绝对定位
3. flex-box
4. 表格布局 table-cell
5. 网格布局 grid

具体代码实现如下：

公共样式：

<style>
    html * {
        margin: 0;
        padding: 0;
    }

    .layout article>div {
        min-height: 100px;
    }
    </style>

浮动布局

<section class="layout float">
        <style>
        .layout.float .left {
            float: left;
            width: 300px;
            background: red;
        }

        .layout.float .center {
            background: yellow;
        }

        .layout.float .right {
            float: right;
            width: 300px;
            background: blue;
        }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <h2>三栏布局-浮动布局</h2>
            </div>
        </article>
    </section>

绝对定位

<section class="layout absolute">
        <style>
        .layout.absolute .left-center-right>div {
            position: absolute;
        }

        .layout.absolute .left {
            left: 0;
            width: 300px;
            background: red;
        }

        .layout.absolute .center {
            left: 300px;
            right: 300px;
            background: yellow;
        }

        .layout.absolute .right {
            right: 0;
            width: 300px;
            background: blue;
        }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>三栏布局-绝对定位布局</h2>
            </div>
            <div class="right"></div>
        </article>
    </section>

flex-box布局

<section class="layout flexbox">
        <style>
        .layout.flexbox .left-center-right {
            display: flex;
        }

        .layout.flexbox .left {
            width: 300px;
            background: red;
        }

        .layout.flexbox .center {
            flex: 1;
            background: yellow;
        }

        .layout.flexbox .right {
            width: 300px;
            background: blue;
        }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>三栏布局-flexbox布局</h2>
            </div>
            <div class="right"></div>
        </article>
    </section>

table-cell布局

<section class="layout table">
        <style>
        .layout.table .left-center-right {
            display: table;
            width: 100%;
            height: 100px;
        }

        .layout.table .left-center-right>div {
            display: table-cell;
        }

        .layout.table .left {
            width: 300px;
            background: red;
        }

        .layout.table .center {
            width: auto;
            background: yellow;
        }

        .layout.table .right {
            width: 300px;
            background: blue;
        }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>三栏布局-table布局</h2>
            </div>
            <div class="right"></div>
        </article>
    </section>

grid布局

<section class="layout grid">
        <style>
        .layout.grid .left-center-right {
            display: grid;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;
        }

        .layout.grid .left {
            background: red;
        }

        .layout.grid .center {
            background: yellow;
        }

        .layout.grid .right {
            background: blue;
        }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>三栏布局-grid布局</h2>
            </div>
            <div class="right"></div>
        </article>
    </section>

延伸：

1、这五种方案的优缺点
答：

五种方案对比

	缺点	优点
浮动布局	浮动后脱离文档流，需要清除浮动，处理不好，会带来一些问题，比如高度塌陷等	兼容性好，只要做好清除浮动，处理好与邻近元素的关系，是比较好的一种方案。
绝对定位布局	脱离文档流，意味着下面的所有子元素也会脱离文档流，就导致这种方法有效性、可使用性比较差	快捷，设置方便，不容易出问题
flexbox布局	不兼容IE8及以下浏览器	css3为了解决上述两个方案的不足出现的，是其中比较完美的一个，移动端基本都使用flex布局
table-cell布局	当其中某个单元格的高度超出时，两侧的单元格也会跟着一起变高	表格布局的兼容性非常好，当flex布局解决不了的时候（比如：IE8不兼容flex布局），可以考虑使用表格布局
grid布局	只支持高版本的浏览器，比较适合局部的布局，不太适合整体布局，不灵活	新出的一种布局方式

2、由以上浮动布局延伸：有哪些清除浮动的方案？每种方案有什么优缺点？

3、将题干中高度已知去掉，哪个还可以用？哪个已经不能用了？

答：在不改动代码的前提下，浮动布局方案、绝对定位方案与grid方案不能使用。

flex布局与table布局可以直接使用。

4、由3题延伸：浮动布局让中间部分超出高度的字，与以上对齐，怎么改？

答：增加BFC。

        .layout.float .center {
            background: yellow;
            overflow: hidden;
        }

5、由4题延伸：几种增加BFC的方式？

6、上下高度固定，中间自适应

1. 绝对定位布局
2. flex布局
3. table布局
4. grid网格布局

具体代码实现如下：

绝对定位

<section class="layout absolute">
        <style>
        .layout.absolute .top-center-bottom>div {
            position: absolute;
            width: 100%;
        }

        .layout.absolute .top {
            top: 0;
            height: 100px;
            background: red;
        }

        .layout.absolute .center {
            top: 100px;
            bottom: 100px;
            background: yellow;
        }

        .layout.absolute .bottom {
            bottom: 0;
            height: 100px;
            background: blue;
        }
        </style>
        <article class="top-center-bottom">
            <div class="top"></div>
            <div class="center">
                <h2>上中下三栏布局-绝对定位</h2>
            </div>
            <div class="bottom"></div>
        </article>
    </section>

flex布局

<section class="layout flex">
        <style>
        html,
        body,
        section,
        article {
            height: 100%;
        }

        .layout.flex .top-center-bottom {
            display: flex;
            flex-direction: column;
        }

        .layout.flex .top {
            height: 100px;
            background: red;
        }

        .layout.flex .center {
            flex: 1;
            background: yellow;
        }

        .layout.flex .bottom {
            height: 100px;
            background: blue;
        }
        </style>
        <article class="top-center-bottom">
            <div class="top"></div>
            <div class="center">
                <h2>上中下三栏布局-flex布局</h2>
            </div>
            <div class="bottom"></div>
        </article>
    </section>

table布局

<section class="layout table">
        <style>
        /*html、body、section、article全部必须高度100%，缺一不可*/

        html,
        body,
        section,
        article {
            height: 100%;
        }

        .layout.table .top-center-bottom {
            display: table;
            width: 100%;
        }

        .layout.table .top-center-bottom>div {
            display: table-row;
        }

        .layout.table .top {
            height: 100px;
            background: red;
        }

        .layout.table .center {
            background: yellow;
        }

        .layout.table .bottom {
            height: 100px;
            background: blue;
        }
        </style>
        <article class="top-center-bottom">
            <div class="top">header</div>
            <div class="center">
                <h2>上中下三栏布局-table布局</h2>
            </div>
            <div class="bottom">footer</div>
        </article>
    </section>

疑问1：top与bottom分栏，当有文字内容是背景会显示，但是当没有文字内容时，背景不会显示，如下图：

grid网格布局

<section class="layout grid">
        <style>
        html,
        body,
        section,
        article {
            height: 100%;
        }

        .layout.grid .top-center-bottom {
            display: grid;
            grid-template-rows: 100px auto 100px;
            grid-template-columns: 100%;
        }

        .layout.grid .top {
            background: red;
        }

        .layout.grid .center {
            background: yellow;
        }

        .layout.grid .bottom {
            background: blue;
        }
        </style>
        <article class="top-center-bottom">
            <div class="top"></div>
            <div class="center">
                <h2>上中下三栏布局-网格布局</h2>
            </div>
            <div class="bottom"></div>
        </article>
    </section>

7、两栏布局

左固定，右自适应

右固定，左自适应

1. 绝对定位
2. float布局
3. flex布局
4. table布局
5. grid布局

上固定，下自适应

下固定，上自适应

1. 绝对定位
2. flex布局
3. table布局
4. grid布局