「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」

基础共讲六部分，如图

页面布局

题目：假设高度100px，三栏布局，其中左右栏宽度为300px，中间自适应

想一下你有几种方式？？？？？

一：解决方案

1：浮动

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

            .layout {
                width: auto;
                border: 3px solid black;
                clear: both;
            }

            .layout .left {
                float: left;
                height: 100px;
                width: 300px;
                background-color: red;
            }

            .layout .right {
                float: right;
                width: 300px;
                height: 100px;
                background-color: blue;
            }

            .layout .center {
                background-color: pink;

            }
        </style>
        <div class="layout">
            <p class="left">左</p>
            <p class="right">右</p>
            <div class="center">
                <h1>666</h1>
                <p> 1：中间部分</p>
                <p> 2：中间部分</p>
                <p> 3：中间部分</p>
            </div>
        </div>

但是他有缺陷，如图所示

2：绝对定位

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

            .layout {
                position: relative;
                width: auto;
                border: 3px solid black;

            }

            .layout .left {
                position: absolute;
                left: 0;
                height: 100px;
                width: 300px;
                background-color: red;
            }

            .layout .right {
                position: absolute;
                right: 0;
                width: 300px;
                height: 100px;
                background-color: blue;
            }

            .layout .center {
                position: absolute;
                background-color: pink;
                left: 300px;
                right: 300px;

            }
        </style>
        <div class="layout">
            <div class="left">左</div>
            <div class="center">
                <h1>666</h1>
                <p> 1：中间部分</p>
                <p> 2：中间部分</p>
                <p> 3：中间部分</p>
            </div>
            <div class="right">右</div>

亦有缺陷，如图

3：flex布局

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

            .layout {
                display: flex;
                border: 3px solid black;
                height: 100px;
            }

            .layout .left {
                /* height: 100px; */
                width: 300px;
                background-color: red;
            }

            .layout .right {
                width: 300px;
                /* height: 100px; */
                background-color: blue;
            }

            .layout .center {
                flex: 1;
                background-color: pink;
            }
        </style>
        <div class="layout">
            <div class="left">左</div>
            <div class="center">
                <h1>666</h1>
                <p> 1：中间部分</p>
                <p> 2：中间部分</p>
                <p> 3：中间部分</p>
            </div>
            <div class="right">右</div>

        </div>

个人觉得flex比较完美，且新，很润哦

4：表格布局

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

            .layout {
                display: table;
                width: 100%;
                border: 3px solid black;
                height: 100px;
            }

            .layout .left {
                display: table-cell;
                width: 300px;
                background-color: red;
            }

            .layout .right {
                width: 300px;
                display: table-cell;
                background-color: blue;
            }

            .layout .center {
                display: table-cell;
                background-color: pink;
            }
        </style>
        <div class="layout">
            <div class="left">左</div>
            <div class="center">
                <h1>666</h1>
                <p> 1：中间部分</p>
                <p> 2：中间部分</p>
                <p> 3：中间部分</p>
            </div>
            <div class="right">右</div>
        </div>

5：网格布局

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

            .layout {
                display: grid;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px;
                width: 100%;
                border: 3px solid black;
            }

            .layout .left {
                background-color: red;
            }

            .layout .right {
                background-color: blue;
            }

            .layout .center {
                background-color: pink;
            }
        </style>
        <div class="layout">
            <div class="left">左</div>
            <div class="center">
                <h1>666</h1>
                <p> 1：中间部分</p>
                <p> 2：中间部分</p>
                <p> 3：中间部分</p>
            </div>
            <div class="right">右</div>
        </div>

二：延申，面试官会由此延申的问题

1：优劣

浮动：兼容性好。但会脱离文档流，处理不好，原地爆炸，亲妈买复活甲都不行那种

绝对定位：快捷，不容易出问题。但会导致后面元素成一坨屎，实用性不太好

flex：比较完美，解决了上述两个缺点

表格布局：老前辈，兼容性好。但是当一个孩子优秀的时候，其他孩子就跟不上了，页面就乱了。先富带动后富？？？有点这意思啊。

网格布局：新东西，代码量简化很多。

2：把高度100px去掉，以上方案哪个还能适用？

flex和表格布局

小结：

你要做到的

同类型的题

然后呢，最后一张图片是课后作业，自己动手写一下。当然方案肯定不止这五个，请大家评论区交流吧