02-css三大布局（圣杯布局/双飞翼布局/div布局）

最新推荐文章于 2024-04-29 14:21:45 发布

快秃头的老阿姨

最新推荐文章于 2024-04-29 14:21:45 发布

阅读量195

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/2201_75866478/article/details/132635599

版权

前言

讲很多原理也没用会显得比较难懂，所以我会尽量用简单的，通俗，并且清除的语言去描述这三种布局，结合实例演示，让大家轻松的理解这三大布局

正文

圣杯布局：

简单来理解，圣杯布局就是左右两个div宽度固定，中间div自适应的三栏布局。

代码实例：

最终实现效果

下面有一个大盒子father，然后里面有三个小盒子（center、left、right),顺序不可以乱(因为我们的目的是让center盒子在中间，所以写在前面)。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局</title>
</head>

<body>
    <div class="father">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

然后给他们设置宽高，背景颜色：

father的宽不设置，只设置高度即可。

center因为要放到中间去，宽度自适应，故而宽度不给具体的值，设为100%（宽度自适应）

然后让father的三个子盒子都浮动起来。

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

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

        .father {
            height: 400px;
            background-color: #ccc;
        }

        .center {
            width: 100%;
            height: 200px;
            background-color: red;
            float: left;
            
        }

        .left {
            width: 100px;
            height: 200px;
            background-color: aqua;
            float: left;
        }

        .right {
            width: 100px;
            height: 200px;
            background-color: rgb(20, 235, 31);
            float: left;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

我们现在想让左left盒子到第一排去，right到第一排右边去，那怎么才能实现呢？

要想让左left盒子到第一排去，我们先在分析一下，现在三个盒子都是浮动的，按照浮动的原理来说，如果father的宽度够大,left和right应该在center盒子的右边，然后left想到左边就只需要给他设置margin-left值为负值的center的宽度就可以过去了，同理，right要想在右边，就可以给right设置margin-left值为负的自身的值就好了。

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

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

        .father {
            height: 400px;
            background-color: #ccc;
        }

        .center {
            width: 100%;
            height: 200px;
            background-color: red;
            float: left;
            
        }

        .left {
            width: 100px;
            height: 200px;
            background-color: aqua;
            float: left;
            margin-left: -100%;
        }

        .right {
            width: 100px;
            height: 200px;
            background-color: rgb(20, 235, 31);
            float: left;
            margin-left: -100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

现在看起来效果好像实现了，但是此时center左右部分是被left和right盖着的，我们加上文字可能看得更清楚：

那我们就需要把left和right从center上挪开，这又怎么办呢？

此时我们可以给父元素father设置padding-left为left元素的宽度，设置padding-right为right元素的宽度，这样就可以确保center宽度还是100%的情况下子元素也不会被遮挡。

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

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

        .father {
            height: 400px;
            background-color: #ccc;
            padding: 0px 100px 0px 100px;
        }

        .center {
            width: 100%;
            height: 200px;
            background-color: red;
            float: left;
            
        }

        .left {
            width: 100px;
            height: 200px;
            background-color: aqua;
            float: left;
            margin-left: -100%;
        }

        .right {
            width: 100px;
            height: 200px;
            background-color: rgb(20, 235, 31);
            float: left;
            margin-left: -100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="center">centercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercenter</div>
        <div class="left">leftleftleft
        </div>
        <div class="right">rightright</div>
    </div>
</body>

</html>

现在就只需将左右盒子设置相对定位移到左右两边就好啦。

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

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

        .father {
            height: 400px;
            background-color: #ccc;
            padding: 0px 100px 0px 100px;
        }

        .center {
            width: 100%;
            height: 200px;
            background-color: red;
            float: left;
            
        }

        .left {
            width: 100px;
            height: 200px;
            background-color: aqua;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -100px;
        }

        .right {
            width: 100px;
            height: 200px;
            background-color: rgb(20, 235, 31);
            float: left;
            margin-left: -100px;
            position: relative;
            right: -100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="center">centercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercenter</div>
        <div class="left">leftleftleft
        </div>
        <div class="right">rightright</div>
    </div>
</body>

</html>

完整代码：

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

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

        .father {
            height: 400px;
            background-color: #ccc;
            padding: 0px 100px 0px 100px;
        }

        .center {
            width: 100%;
            height: 200px;
            background-color: red;
            float: left;
            
        }

        .left {
            width: 100px;
            height: 200px;
            background-color: aqua;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -100px;
        }

        .right {
            width: 100px;
            height: 200px;
            background-color: rgb(20, 235, 31);
            float: left;
            margin-left: -100px;
            position: relative;
            right: -100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="center">centercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercenter</div>
        <div class="left">leftleftleft
        </div>
        <div class="right">rightright</div>
    </div>
</body>

</html>

双飞翼布局：

理解了圣杯布局，双飞翼布局就很好理解了，双飞翼布局和圣杯布局前半部分是一样的，但是在解决被遮挡部分不同，双飞翼布局为了解决被遮挡的问题，在center盒子中嵌套了一个子盒子center_child,并且设置左外边距为left盒子的宽度，右外边距为right盒子的宽度，代码如下。

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

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

        .father {
            height: 400px;
            background-color: #ccc;
            /* padding: 0px 100px 0px 100px; */
        }

        .center {
            width: 100%;
            height: 200px;
            background-color: red;
            float: left;

        }

        .left {
            width: 100px;
            height: 200px;
            background-color: aqua;
            float: left;
            margin-left: -100%;
            /* position: relative; */
            /* left: -100px; */
        }

        .right {
            width: 100px;
            height: 200px;
            background-color: rgb(20, 235, 31);
            float: left;
            margin-left: -100px;
            /* position: relative; */
            /* right: -100px; */
        }

        .center_child {
            width: 100%;
            height: 200px;
            background-color: #1e09e0;
            margin: 0px 100px 0px 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="center">
            <div class="center_child">
                centercentercentercentercentercentercentercentercenter
                centercentercentercentercentercentercentercentercenter
            </div>
        </div>
        <div class="left">leftleftleft
        </div>
        <div class="right">rightright</div>
    </div>
</body>

</html>

多列布局

CSS多列布局是一种用于创建多个列的网页布局方法。它允许内容在页面上以列的形式呈现，类似于报纸或杂志的版面。这种布局方式非常适合展示大量文本内容或者分隔不同的内容块。

实现多列布局的原理是通过CSS的column属性。您可以使用column-count属性来指定要创建的列数，使用column-width属性来指定每列的宽度，或者使用column-gap属性来指定列与列之间的间距。通过调整这些属性的值，您可以灵活地控制多列布局的外观。

下面是

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wid {
            column-count: 3;
           
        }
    </style>
</head>

<body>
    <div id="wid">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>
</body>

</html>

简单的例子，展示如何使用CSS多列布局：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wid {
            column-width: 200px;
           
        }
    </style>
</head>

<body>
    <div id="wid">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>
</body>

</html>