首页 > 作文

前端一面/面试常考题1

更新时间:2023-04-07 07:52:23 阅读：评论：0

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

【题外话：日常宣读我的目标===想要成为一名优雅的程序媛】

一、分析

1. 题目真的像我们想得这么简单吗？

其实不然，这道题可以有多种方案，面试官想要通过这个题目考察面试者对css的掌握程度，是否善于思考、总结。

比较容易想到的两种方法是：

浮动绝对定位

但如果只给出这两个答案，还没到及格线。

2. 进阶

flextable cell网格布局—grid

【下文第二部分，有相应的代码及实现效果演示】

3. 延伸。面试官极有可能就这个题目延伸出若干问题。

这五种方案各自有什么优点和缺点？这几种方案的兼容性如何，如果在做业务的时候，应该选择哪一种方案，哪个是最实用的？如果把【假设高度已知】去掉，这五种方案的效果？怎么解决出现的问题？

【下文第三部分，有关于这几个问题的参考答案】

二、五种方法的代码实现

<!doctype html><html>    <head>        <meta chart="utf-8">        <title></title>        <style>            html * {                padding: 0;                margin: 0;            }            .layout {                margin-top: 20px;            }            .layout article div {                min-height: 100px;            }        </style>    </head>    <body>        <!-- 浮动解决方案 -->        <ction class="layout float">            <style media="screen">                .layout.float .left {                    float: left;                    width: 300px;                    background: #ffcccc;                }                .layout.float .right {                    float: right;                    width: 300px;                    background: #ff6666;                }                .layout.float .center {                    background: #ffffcc;                }            </style>            <article class="left-right-center">                <div class="left"></div>                <div class="right"></div>                <div class="center">                    <h1>浮动解决方案</h1>                    1.这是三栏布局中间部分                    2.这是三栏布局中间部分                </div>            </article>        </ction>                <!-- 绝对定位解决方案 -->        <ction class="layout absolute">            <style>                .layout.absolute .left{                    position: absolute;                    width: 300px;                    left: 0;                    background: red;                }                .layout.absolute .center{                    position: absolute;                    left: 300px;                    right: 300px;                    background: pink;                }                .layout.absolute .right{                    position: absolute;                    width: 300px;                    right: 0;                    background: blue;                }            </style>            <article class="left-center-right">                <div class="left"></div>                <div class="center">                    <h1>绝对定位解决方案</h1>                    1.这是三栏布局绝对定位中间部分                    2.这是三栏布局绝对定位中间部分                </div>                <div class="right"></div>            </article>        </ction>                <!-- flexbox 解决方案 -->        <ction class="layout flexbox">            <style>                .layout.flexbox {                    margin-top: 150px;                }                .layout.flexbox .left-center-right {                    display: flex;                }                .layout.flexbox .left{                    width: 300px;                    background: #0000ff;                }                .layout.flexbox .center{                    flex: 1;                    background: greenyellow;                }                .layout.flexbox .right{                    width: 300px;                    background: blueviolet;                }            </style>            <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>        </ction>                <!-- 表格布局 -->        <ction class="layout table">            <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: #0000ff;                }                .layout.table .center{                    background: #adff2f;                }                .layout.table .right{                    width: 300px;                    background: #008b8b;                }            </style>            <article class="left-center-right">                <div class="left"></div>                <div class="center">                    <h1>表格布局 解决方案</h1>                    1.这是三栏布局 表格布局 中间部分                    2.这是三栏布局 表格布局 中间部分                </div>                <div class="right"></div>            </article>        </ction>                <!-- 网格布局 -->        <ction class="layout grid">            <style>                .layout.grid .left-center-right{                    display: grid;                    width: 100%;                    grid-template-rows: 100%;                    grid-template-columns: 300px auto 300px;                }                .layout.grid .left{                    background: #0000ff;                }                .layout.grid .center{                    background: #adff2f;                }                .layout.grid .right{                    background: #008b8b;                }            </style>                        <article class="left-center-right">                <div class="left"></div>                <div class="center">                    <h1>网格布局 解决方案</h1>                    1.这是三栏布局 网格布局 中间部分                    2.这是三栏布局 网格布局 中间部分                </div>                <div class="right"></div>            </article>        </ction>    </body></html>

三、题目的延伸问题

1. 这五种方案各自有什么优点和缺点？这五种方案的兼容性如何，如果在做业务的时候，应该选择哪一种方案，哪个是最实用的？

【浮动】

优点 :兼容性比较好。

缺点 :浮动是脱离文档流的，如果处理不好，会带来很多问题。有些时候需要清除浮动，需要很好的处理浮动周边元素的关系。

【绝对定位】

优点：快捷。

缺点：布局脱离文档流，意味着下面的子元素也要脱离文档流，导致这个方案的有效性是比较差的。

【flex】

优点 :比较完美的解决了浮动和绝对定位的问题。在移动端比较常用。

缺点 :兼容性比较差，不兼容ie8及以下的版本。因为这个是css3中新增的display的属性值。

【表格布局】

优点：兼容性比较好。

缺点：操作繁琐，对o不友好；当某个单元格高度变化时，所在行的其它单元格也会变化。

【网格布局】

优点：代码比较简单。

缺点：兼容性比较差。

因为是较新的技术，如果在面试时回答出这种方法，可以一定程度上体现出面试者对新技术的学习和渴望。

2. 如果把【假设高度已知】去掉，这五种方案的效果？怎么解决出现的问题？

浮动

<!-- 浮动解决方案 -->        <ction class="layout float">            <style media="screen">                .layout.float .left {                    float: left;                    width: 300px;                    background: #ffcccc;                }                .layout.float .right {                    float: right;                    width: 300px;                    background: #ff6666;                }                .layout.float .center {                    background: #ffffcc;                }            </style>            <article class="left-right-center">                <div class="left"></div>                <div class="right"></div>                <div class="center">                    <h1>浮动解决方案</h1>                   流连忘返是什么意思 1.这是三栏布局中间部分                    2.这是三栏布局中间部分                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                </div>            </article>        </ction>

问题的原因

因为浮动的基本原理，中间的内容向左浮动的时候，被左边的块挡住，所以在中间部分排，当文案超出以后，左侧没有遮挡物，就会溢出。

问题的解决

可以通过创建bfc的方式解决。

.layout.float .center {    background: #ffffcc;    overflow: hidden;}

绝对定位

<!-- 绝对定位解决方案 -->        <ction class="layout absolute">            <style>                .layout.absolute .left{                    position: absolute;                    width: 300px;                    left: 0;                    background: red;    tup什么意思            }                .layout.absolute .center{                    position: absolute;                    left: 300px;                    right: 300px;                    background: pink;                }                .layout.absolute .right{                    position: absolute;                    width: 300px;                    right: 0;                    background: blue;                }            </style>            <article class="left-center-right">                <div class="left"></div>                <div class="center">                    <h1>绝对定位解决方案</h1>                    1.这是三栏布局绝对定位中间部分                    2.这是三栏布局绝对定位中间部分                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                </div>                <div class="right"></div>            </article>        </ction>

flex、表格布局、网格布局

<!-- flexbox 解决方案 -->        <ction class="layout flexbox">            <style>                .layout.flexbox {                    m女微信名字简单气质argin-top: 280px;                }                .layout.flexbox .left-center-right {                    display: flex;                }                .layout.flexbox .left{                    width: 300px;                    background: #0000ff;                }                .layout.flexbox .center{                    flex: 1;                    background: greenyellow;                }                .layout.flexbox .right{                    width: 300px;                    background: blueviolet;                }            </style>            <article class="left-center-right">                <div class="left"></div>                <div class="center">                    <h1>flexbox 解决方案</h1>                    1.这是三栏布局flexbox中间部分                    2.这是三栏布局flexbox中间部分                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                </div>                <div class="right"></div>            </article>        </ction>                <!-- 表格布局 -->        <ction class="layout table">            <style>                .lay个税计算器2017out.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: #0000ff;                }                .layout.table .center{                    background: #adff2f;                }                .layout.table .right{                    width: 300px;                    background: #008b8b;                }            </style>            <article class="left-center-right">                <div class="left"></div>                <div class="center">                    <h1>表格布局 解决方案</h1>                    1.这是三栏布局 表格布局 中间部分                    2.这是三栏布局 表格布局 中间部分                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                </div>                <div class="right"></div>            </article>        </ction>                <!-- 网格布局 -->        <ction class="layout grid">            <style>                .layout.grid .left-center-right{                    display: grid;                    width: 100%;                    grid-template-rows: 100%;                    grid-template-columns: 300px auto 300px;                }                .layout.grid .left{                    background: #0000ff;                }                .layout.grid .center{                    background: #adff2f;                }                .layout.grid .right{                    background: #008b8b;                }            </style>                        <a 女职工劳动保护特别规定(草案) rticle class="left-center-right">                <div class="left"></div>                <div class="center">                    <h1>网格布局 解决方案</h1>                    1.这是三栏布局 网格布局 中间部分                    2.这是三栏布局 网格布局 中间部分                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                    <p>增加高度</p>                </div>                <div class="right"></div>            </article>        </ction>