每日3题(32)

2020/4/7

问题

HTTP:HTTP状态码

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

JavaScript:哪些数组方法不改变/改变原数组

HTTP:HTTP状态码

1xx：指示信息——表示请求已接收，继续处理
2xx：成功——表示请求已经被成功接收
3xx：重定向——要完成请求必须进行更进一步的操作
4xx：客户端错误——请求有语法错误或请求无法实现
5xx：服务器错误——服务器未能实现合法的请求

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

五种解决方式代码

浮动解决方式
绝对定位解决方式
flexbox解决方式
表格布局
网格布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layout</title>
    <style>
        html *{
            padding: 0;
            margin: 0;
        }
        .layout{
            margin-top: 20px;
        }
        .layout article div{
            min-height: 100px;
        }
    </style>
</head>
<body>
    <!-- 浮动解决方式 -->
    <section class="layout float">
        <style>
            .layout.float .left{
                float: left;
                width: 300px;
                background: red;
            }
            .layout.float .right{
                float: right;
                width: 300px;
                background: blue;
            }
            .layout.float .center{
                background: yellow;
            }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <h1>浮动解决方式</h1>
                1.这是三栏布局的正中间部分
                2.这是三栏布局的正中间部分
            </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">
                <h1>绝对定位解决方式</h1>
                1.这是三栏布局的正中间部分
                2.这是三栏布局的正中间部分
            </div>
            <div class="right"></div>
        </article>
    </section>
    <!-- flexbox解决方式 -->
    <section class="layout flexbox">
        <style>
            .layout.flexbox{
                margin-top: 140px;
            }
            .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">
                <h1>flexbox解决方式</h1>
                1.这是三栏布局的正中间部分
                2.这是三栏布局的正中间部分
            </div>
            <div class="right"></div>
        </article>
    </section>
    <!-- 表格布局 -->
    <section 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: red;
            }
            .layout.table .center{
                background: yellow;
            }
            .layout.table .right{
                width: 300px;
                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>
    </section>
    <!-- 网格布局 -->
    <section class="layout grid">
        <style>
            .layout.grid .left-center-right{
                display: grid;
                width: 100%;
                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">
                <h1>网格解决方式</h1>
                1.这是三栏布局的正中间部分
                2.这是三栏布局的正中间部分
            </div>
            <div class="right"></div>
        </article>
    </section>
</body>
</html>

展示效果

知识拓展
上述5中解决方式是比较常见的，但是我们不能只局限于为了问答而问答，我们应该从此基础上升华一下问题。答完了这5种常见方式，并不代表我们页面布局这一话题就结束了，面试官可能还会延伸我们的问题，比如：这5种布局方式各自有什么优点和缺点？
1. 如果高度已知条件去掉，考虑纵向，那么对于中间内容过多，导致中间格子撑开，此时需要左右跟着撑开，以上5种方式哪几种还能使用？
2. 这5中方式的兼容性如何？如果让你选择一种最优的去应用于业务，你会选择哪种方式？
那么，接下来就来围绕这三个问题来讲解：

1、各自的优缺点

① 对于浮动：

优点

兼容性比较好，把清除浮动和其它浮动周边元素的关系处理好的话，那么它的兼容性是挺不错的。

扫描二维码关注公众号，回复： 11032746 查看本文章

缺点

设置浮动之后，脱离了文档流，处理不好的话，会带来很多问题，这是它本身的局限性。

② 对于绝对定位：

优点

快捷，不容易出问题

缺点

本身脱离了文档流，就会导致子元素跟着脱离文档流。因此，导致绝对定位的有效性、可使用性比较差。

③ 对于flexbox

css3中推出的flex布局，就是为了解决上述两种方式不足而出现的，算是比较完美的一种方式，尤其是对于移动端

④ 对于表格布局

优点

尽管多数人吐槽表格布局，但其实，表格布局在很多场景都适用的。比如上文写的三栏布局设计当中，表格布局是不是很轻松就实现了呢？

同时，表格布局的兼容性是非常好的，当用flex解决不了问题的时候，对于PC端 IE8是不支持flex的，此时就可以尝试表格布局

缺点

除开历史上一些诟病外，还有一个：

比如我们把三栏理解成为三个小单元格，那么当其中某一个单元格高度超出的时候，其余两侧也会跟着调整，于是对于有些场景是不合适的。因此，对于不同场景，我们可以在flex和表格布局进行选优操作

⑤ 对于网格布局

这一块的话，算是新热点，也是经历了一段时间的演变，从上文代码来看的话，通过网格布局我们能让代码更加简单、方便实现逻辑。在面试的时候提到也可以说明你比较关注新的事物，主动学习能力不错。

2、去掉高度，有哪几种布局可以使用？

这里，我们就采用增加高度方式来看看，还有哪些布局能使用。（中间区域增加几个p标签）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layout</title>
    <style>
        html *{
            padding: 0;
            margin: 0;
        }
        .layout{
            margin-top: 20px;
        }
        .layout article div{
            min-height: 100px;
        }
    </style>
</head>
<body>
    <!-- 浮动解决方式 -->
    <section class="layout float">
        <style>
            .layout.float .left{
                float: left;
                width: 300px;
                background: red;
            }
            .layout.float .right{
                float: right;
                width: 300px;
                background: blue;
            }
            .layout.float .center{
                background: yellow;
            }
        </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>
            </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">
                <h1>绝对定位解决方式</h1>
                1.这是三栏布局的正中间部分
                2.这是三栏布局的正中间部分
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
            </div>
            <div class="right"></div>
        </article>
    </section>
    <!-- flexbox解决方式 -->
    <section class="layout flexbox">
        <style>
            .layout.flexbox{
                margin-top: 140px;
            }
            .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">
                <h1>flexbox解决方式</h1>
                1.这是三栏布局的正中间部分
                2.这是三栏布局的正中间部分
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
            </div>
            <div class="right"></div>
        </article>
    </section>
    <!-- 表格布局 -->
    <section 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: red;
            }
            .layout.table .center{
                background: yellow;
            }
            .layout.table .right{
                width: 300px;
                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>
            </div>
            <div class="right"></div>
        </article>
    </section>
    <!-- 网格布局 -->
    <section class="layout grid">
        <style>
            .layout.grid .left-center-right{
                display: grid;
                width: 100%;
                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">
                <h1>网格解决方式</h1>
                1.这是三栏布局的正中间部分
                2.这是三栏布局的正中间部分
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
            </div>
            <div class="right"></div>
        </article>
    </section>
</body>
</html>

展示效果

这里，图片可能不是特别清楚，读者可以跑一遍上述代码，在浏览器打开使用会更好一点嗷~

总结

从上述显示效果来看的话，改变了高度，用flex和表格布局还能继续使用。

对于第一块，也就是浮动布局那一块，我们还可以进行知识拓展：

为什么会有两段文字跑到最左边去了呢？

答：因为向左浮动的原因，上面文字被左边红色部分挡住了，当内容超过高度后，就会往左边移动了。

那你怎么将多余的两段文字接着上述文字显示，而不是向左移动？

答：使用BFC清除浮动

<!-- 浮动解决方式 -->
    <section class="layout float">
        <style>
            .layout.float .left{
                float: left;
                width: 300px;
                background: red;
            }
            .layout.float .right{
                float: right;
                width: 300px;
                background: blue;
            }
            .layout.float .center{
                background: yellow;
                overflow: hidden;   
            }
        </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>
            </div>
        </article>
    </section>