页面布局

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

前端基础面试6/1-页面布局

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

一：解决方案

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>

但是他有缺陷，如图所示

前端基础面试6/1-页面布局

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>

亦有缺陷，如图

前端基础面试6/1-页面布局

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比较完美，且新，很润哦前端基础面试6/1-页面布局

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>

前端基础面试6/1-页面布局

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>