关于css页面左右，左中右，上中下布局的一些总结探讨

2019-03-27 本文已影响28人 Aniugel

本次我们将探讨的布局是平时项目中常见的几种情况，具体描述如下：

三栏布局

1.左右宽度固定，中间自适应（推荐使用flex或者calc布局因为代码简单，问题少）
2.上下高度固定，中间自适应
3.中间宽度固定，左右自适应

两栏布局

1.左宽度固定，右自适应
2.右宽度固定，左自适应
3.上高度固定，下自适应
4.下高度固定，上自适应

一、左右宽度固定，中间自适应

这种左右宽度固定中间自适应的情况最多出现的地方就是移动端标题栏的自适应效果。如图：返回和更多按钮的宽度一般情况是固定的，标题框的宽度一般是自适应的。要做到这种效果，一般有三种方法①float布局②absolute绝对定位③flex布局。推荐使用第三种flex布局。

image.png

1.float布局
缺点 :浮动是脱离文档流的，有些时候需要清除浮动，需要很好的处理浮动
优点 :兼容性比较好

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .left {
        background-color: blue;
        width: 300px;
        height: 200px;
        float: left;
    }
    .center {
        background-color: #ccc;
        height: 200px;
        margin: 0 300px;
    }
    .right {
        background-color: red;
        width: 300px;
        height: 200px;
        float: right;

    }
</style>
<!--该布局法的好处是受外界影响小，但是不足是 三个元素的顺序，center一定要放在最后，这是               
                    和绝对定位不一样的地方，center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。
                    当浏览器窗口很小的时候，右边元素会被击倒下一行。-->
<body>
    <section>
        <!-- div的顺序不要换 center用来清浮动-->
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">浮动 ： center--center--center--</div>
    </section>
</body>

2.position：absolute布局
缺点 :该布局脱离文档流，所以子元素也必须脱离文档流，因此可使用性比较差
优点 :快捷，比较不容易出问题

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .section{
        position: relative;
        height: 300px;
        width: 100%;
        background-color: black;
    }
    .left {
        background-color: blue;
        width: 300px;
        height: 200px;
        position: absolute;
        top: 0;
        left: 0;

    }
    .center {
        background-color: #ccc;
        height: 200px;
        margin: 0 300px;
    }

    .right {
        background-color: red;
        width: 300px;
        height: 200px;
        position: absolute;
        top: 0;
        right: 0;

    }
</style>
<body>
    <section class="section">
        <div class="left">left</div>
        <div class="center">浮动 ： center--center--center--</div>
        <div class="right">right</div>
    </section>
</body>

3.flex布局

思路：将父元素box设为display:flex;可将box设置为弹性盒模型进行布局（如果对flex不了解，可点击打开链接学习）

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

    .section {
        height: 300px;
        width: 100%;
        background-color: black;
        display: flex;
        /* justify-content: space-between */
    }

    .left {
        background-color: blue;
        width: 300px;
        height: 200px;

    }

    .center {
        background-color: #ccc;
        height: 200px;
        flex: 1;
    }

    .right {
        background-color: red;
        width: 300px;
        height: 200px;
    }
</style>
<body>
    <section class="section">
        <div class="left">left</div>
        <div class="center">浮动 ： center--center--center--</div>
        <div class="right">right</div>
    </section>
</body>

4.对中间的宽度进行calc计算

三个元素都向左浮动，左右定宽，中间的对其进行计算，让100%宽度减去左右宽度，即为中间宽度。

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

    .section {
        height: 300px;
        /* width: 100%; */
        background-color: black;
        /* overflow: hidden; */
    }

    .left {
        background-color: blue;
        width: 300px;
        height: 200px;
        float: left;

    }
    .right {
        background-color: red;
        width: 300px;
        height: 200px;
        float: left;
    }

    .center {
        float: left;
        background-color: #ccc;
        height: 200px;
        width: calc(100% - 600px);
    }
</style>

<body>
    <section class="section">
        <div class="left">left</div>
        <div class="center">浮动 ： center--center--center--</div>
        <div class="right">right</div>
    </section>
</body>

5.双飞翼布局

目的：为了优先显示中间主要部分，浏览器渲染引擎在构建和渲染渲染树是异步的（谁先构建好谁先显示），故在编写时，先构建中间main部分，但由于布局原因，将left置于center左边，故而出现了双飞翼布局。

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

    body {
        min-width: 550px;
    }

    .col {
        float: left;
    }

    #main {
        width: 100%;
        height: 200px;
        background-color: #ccc;
    }

    #main-wrap {
        margin: 0 190px;
        /*这是圣杯和双飞翼最明显的区别，在main内部使用的是margin，而圣杯是直接在container部分使用padding*/
    }

    #left,
    #right {
        width: 190px;
        height: 200px;
        background-color: #0000FF;
    }

    #left {
        margin-left: -100%;
    }

    #right {
        margin-left: -190px;
        background-color: #FF0000;
    }
</style>

<body>
    <div id="container">
        <div id="main" class="col">
            <div id="main-wrap"> #main </div>
        </div>
        <div id="left" class="col">#left</div>
        <div id="right" class="col">#right</div>
    </div>
</body>

6.圣杯布局

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

    .wrapper {
        padding: 0 100px;
        overflow: hidden;
    }

    .col {
        position: relative;
        float: left;
    }

    .main {
        width: 100%;
        height: 200px;
        background: yellow;
    }

    .left,
    .right {
        width: 100px;
        height: 200px;
        background: red;
    }

    .left {
        margin-left: -100%;
        left: -100px;
    }

    .right {
        margin-left: -100px;
        right: -100px;
    }
</style>

<body>
    <section class="wrapper">
        <section class="col main">main</section>
        <aside class="col left">left</aside>
        <aside class="col right">right</aside>
    </section>
</body>

圣杯布局的缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图，当main部分的宽小于left部分时就会发生布局混乱。
圣杯布局和双飞翼的区别：圣杯布局是整体使用了一个container（上例的wrapper），将三列放入其中，left和right占据的是wrapper的padding-left和 padding-right(上例第八行padding:0 100px;)。双飞翼布局是在center部分多加了一个节点元素，left和right部分的位置在main-wrap的margin（magin-left和margin-right）部分。

二、上下高度固定中间自适应

参考文件地址

1.absolute布局:

上中下都设置属性absolute，跟左中右布局差不多，但是要注意的要设置html和body的高度。center的要设置top和bottom的值，左中右设置margin就可以了

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

    html,
    body {
        /* 一定要设置这个值不然撑不开 */
        height: 100%;
    }

    .section {
        height: 100%;
        width: 100%;
        background-color: black;
        position: relative;
    }

    .top {
        background-color: blue;
        width: 100%;
        height: 200px;
        position: absolute;
        top: 0;

    }

    .center {
        background-color: #ccc;
        width: 100%;
        position: absolute;
        top: 200px;
        bottom: 200px;
        overflow: auto;
    }

    .buttom {
        background-color: red;
        width: 100%;
        height: 200px;
        position: absolute;
        bottom: 0;
    }
</style>

<body>
    <section class="section">
        <div class="top">top</div>
        <div class="center">
            0987
        </div>
        <div class="buttom">buttom</div>
    </section>
</body>

2.flex布局

和左中右布局原理一样只是方向是竖直的。

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

    html,
    body {
        /* 一定要设置这个值不然撑不开 */
        height: 100%;
    }

    .section {
        height: 100%;
        width: 100%;
        background-color: black;
        display: flex;
        flex-direction: column;
    }

    .top {
        background-color: blue;
        width: 100%;
        height: 200px;

    }

    .center {
        background-color: #ccc;
        /* height: 100%; */
        flex: 1;
        overflow: auto;
    }

    .buttom {
        background-color: red;
        width: 100%;
        height: 200px;
    }
</style>

<body>
    <section class="section">
        <div class="top">top</div>
        <div class="center">
        </div>
        <div class="buttom">buttom</div>
    </section>
</body>