css - 圣杯布局和双飞翼布局

最新推荐文章于 2021-04-27 01:08:06 发布

Mars-xq

最新推荐文章于 2021-04-27 01:08:06 发布

阅读量386

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/sinat_31057219/article/details/79271752

css 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了两种经典的CSS布局方法——圣杯布局与双飞翼布局，并通过实例对比了两者的实现方式及差异。重点讲解了如何利用负边距、浮动与相对定位等技巧来实现三栏布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：

Flex 布局教程：语法篇
 Flex布局
 那些年，奇妙的圣杯与双飞翼，还有负边距
 CSS布局中圣杯布局与双飞翼布局的实现思路差异在哪里？
CSS布局奇淫巧计之-强大的负边距
 聊聊为什么淘宝要提出「双飞翼」布局

圣马布局和双飞翼的流程：

1、搭建 head content foot, content 内部的三个元素全部左浮动，然后清除浮动防止影响 foot
2、给 main 100% 的宽度让他占满一行
3、给 left -100% 的margin-left 让他移动到最左边，给 right 和他宽度一样的负 margin 让他移动到最右边
4、针对移动后 main 的两边会被 left 和 right 重合覆盖掉做出不同的改变，这儿也就是两个布局的本质区别：
>4.1 圣杯布局会给 content 内边距，左右分别为 left 和 right的宽度，然后再利用相对定位移动 left 和 right
4.2 双飞翼布局会在 main 里面再加一层 wrap ，然后把内容都写在 wrap 里面，正对 wrap 设置他的 margin, 左右外边距和 left 与 right 一样

圣杯布局demo：


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .cleanfix {
            clear: both;
        }

        .cleanfix:after {
            content: '.';
            clear: both;
            display: block;
            visibility: hidden;
            height: 0;
            zoom: 1;
        }

        .head, .foot {
            width: 100%;
            height: 80px;
        }

        .head {
            background-color: #4eb5f7;
        }

        .foot {
            background-color: #999999;
        }

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

        .left {
            width: 40px;
            height: 60px;
            background-color: #B9E078;
            margin-left: -100%;
        }

        .right {
            width: 60px;
            height: 80px;
            background-color: #FF9900;
            margin-left: -60px;
        }

        .main {
            background-color: crimson;
            width: 100%;
        }

        .content {
            padding: 0 60px 0 40px;
        }

        .left {
            position: relative;
            left: -40px;
        }

        .right {
            position: relative;
            right: -60px;
        }
    </style>
</head>
<body>
<div class="head">head</div>
<div class="content cleanfix">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="foot">foot</div>
</body>
</html>

双飞翼布局：


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .cleanfix {
            clear: both;
        }

        .cleanfix:after {
            content: '.';
            clear: both;
            display: block;
            visibility: hidden;
            height: 0;
            zoom: 1;
        }

        .head, .foot {
            width: 100%;
            height: 80px;
        }

        .head {
            background-color: #4eb5f7;
        }

        .foot {
            background-color: #999999;
        }

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

        .left {
            width: 40px;
            height: 60px;
            background-color: #B9E078;
            margin-left: -100%;
        }

        .right {
            width: 60px;
            height: 80px;
            background-color: #FF9900;
            margin-left: -60px;
        }

        .main {
            background-color: crimson;
            width: 100%;
        }

        .wrap {
            background-color: darkmagenta;
            margin-left: 40px;
            margin-right: 60px;
        }
    </style>
</head>
<body>
<div class="head">head</div>
<div class="content cleanfix">
    <div class="main">
        <div class="wrap">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="foot">foot</div>
</body>
</html>