前端面试题之布局

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

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

你可能感兴趣的:(前端)