css经典布局

lanzhusiyu

2020-08-01

经典布局方案

圣杯布局
双飞翼布局
（左右固定，中间自适应）
圣杯布局：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

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

        .middle,
        .left,
        .right {
            float: left;
            position: relative;
        }

        .middle {
            width: 100%;
            height: 200px;
            background: red;
        }

        .left {
            width: 100px;
            height: 100px;
            background: yellow;
            margin-left: -100%;
            left: -100px;
        }

        .right {
            width: 100px;
            height: 100px;
            background: blue;
            margin-left: -100px;
            right: -100px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

1.三栏布局，中间内容区（middle）放在最前面，因为最先渲染，设置width：100%，给left和right设置宽、高、颜色

2.middle，left，right同时设置float：left，此时会出现以下情况

css经典布局

3.我们需要把left和right放到左右两边，利用负边距，left设置margin-left：-100%，right设置margin-left：-100px

css经典布局

4.这时位置正确了，但是覆盖了middle，需要给三者的父级加一个padding：0 100px，留出left和right的位置，然后设置left：-100px，right：-100px，最后还需要给三者加一个共同属性position：relative定位

css经典布局

双飞翼布局：

1.与圣杯布局最大的区别是解决内容覆盖的方式不同。

2.去掉共同的父级wrapper，给middle加一个父级middle-wrap，属性设置为margin：0 100px，同时取消三者共同属性position：relative，也不用给left和right去调整位置。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .middle,
        .left,
        .right {
            float: left;
        }

        .middle {
            width: 100%;
            height: 200px;
            background: red;

        }

        .middle-wrap {
            margin: 0 100px;
        }

        .left {
            width: 100px;
            height: 100px;
            background: yellow;
            margin-left: -100%;

        }

        .right {
            width: 100px;
            height: 100px;
            background: blue;
            margin-left: -100px;

        }
    </style>
</head>

<body>
    <div class="middle">
        <div class="middle-wrap">
            奥克兰的加拉时间到拉萨的骄傲了斯柯达就爱上了肯德基阿喀琉斯拉克丝建档立卡是觉得卡收到卡时间很多卡就是电话卡接收到卡萨丁黄金卡速度哈空间收到货
        </div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>

</html>

flex布局：

只需按照left，middle，right排列

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            display: flex;
        }

        .left {
            flex-basis: 100px;
            height: 100px;
            background: blue;
        }

        .middle {
            flex: 1;
            height: 200px;
            background: red;

        }

        .right {
            flex-basis: 100px;
            height: 100px;
            background: blue;

        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

</html>

css