圣杯布局双飞翼布局

最新推荐文章于 2022-12-29 23:46:40 发布

木易一

最新推荐文章于 2022-12-29 23:46:40 发布

阅读量159

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/weixin_43684713/article/details/90259380

版权

HTML+CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

圣杯布局和双飞翼布局效果相同，实现方法不同。都是为了实现两侧宽度固定，中间宽度自适应的三栏布局。

如下图：

圣杯布局借助的是其他非主要元素覆盖了其父元素的padding值所占据的宽度，同一个杯子，非主要元素其只是占据了全部容器的padding值部分；

使用flex弹性布局实现

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .HolyGrail{
            display: flex;
            flex-direction: column;
            text-align: center;
            min-height: 100vh;
        }
        .header{
            flex: 1;
            background-color: #f8ff73;
        }
        .footer{
            flex: 1;
            background-color: #f8ff73;
        }
        .block{
            display: flex;
            flex: 5;
            background-color: #e0868c;
        }
        .content{
            flex: 1;
        }
        .nav{
            flex: 0 0 100px;
            background-color: #78bcff;

        }
        .aside{
            flex: 0 0 100px;
            background-color: #78bcff;
        }
    </style>
</head>
<body>
<div class="HolyGrail">
    <div class="header">Header</div>
    <div class="block">
        <div class="nav">Left</div>
        <div class="content">Center</div>
        <div class="aside">Right</div>
    </div>
    <div class="footer">Footer</div>
</div>
</body>
</html>

使用浮动的方法实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
            text-align: center;
        }
        .block {
            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;
        }
        .header,.footer{
            background-color: #45baff;
            height: 30px;
        }

    </style>
</head>
<body>
<header class="header">header</header>
<section class="block">
    <section class="col main">main</section>
    <aside class="col left">left</aside>
    <aside class="col right">right</aside>
</section>
<footer class="footer">footer</footer>
</body>
</html>

上面出现的<section>、<aside>、<header>、<footer>标签都是HTML5中出现的新标签，含义如下：

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<aside> 标签定义其所处内容之外的内容。

<header> 标签定义文档的页眉（介绍信息）。

<footer> 标签定义文档或节的页脚。

圣杯布局的缺点：正常情况下是没有问题的，当main部分的宽小于left部分时就会发生布局混乱。

双飞翼布局是给主要部分main-wrap添加一个外层元素main，其他非主要元素所占据的空间是主要部分(main-wrap)的margin空间，像鸟的两个翅膀，与主要部分main脱离(main和main-wrap是下面双飞翼布局的元素id)。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            text-align: center;
        }
        body{
            min-height: 600px;
        }
        .header,.footer{
            background-color: #45baff;
            height: 50px;
        }
        .main{
            width: 100%;
            height: 200px;
            background-color: #f8ff73;
            float: left;
        }
        .mian-wrap{
            margin: 0 190px;
            /*这是圣杯和双飞翼最明显的区别，在main内部使用的是margin，*/
            /*而圣杯是直接在container部分使用padding*/
        }
        .left,.right{
            width: 190px;
            height: 200px;
            background-color: #e0868c;
        }
        .left{
            margin-left: -100%;
            float: left;
        }
        .right{
            margin-left: -190px;
            float: left;
        }
        .footer{
            clear: both;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">header</div>
    <div class="main">
        <div class="mian-wrap">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="footer">footer</div>
</div>
</body>
</html>

双飞翼布局的缺点是多一层dom结果，增加渲染树生成的计算量。