经典布局方案

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

<!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>
    <p class="wrapper">
        <p class="middle"></p>
        <p class="left"></p>
        <p class="right"></p>
    </p>
</body>

</html>

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

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

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

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

双飞翼布局：

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

</html>

css经典布局

标签：set 调整 css red width str init com 最大

以上就是css经典布局的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！