圣杯布局【双飞翼布局】的几种实现

最新推荐文章于 2024-04-07 21:56:11 发布

Vivian_jay

最新推荐文章于 2024-04-07 21:56:11 发布

阅读量1.9k

点赞数 3

分类专栏： CSS学习笔记文章标签：布局圣杯布局双飞翼布局负边距弹性盒模型

本文链接：https://blog.csdn.net/Vivian_jay/article/details/77430736

版权

CSS学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

圣杯布局【双飞翼布局】：两边定宽，中间宽度自适应；且优先渲染中间主题内容部分。

一、负边距法

DOM结构：
由于需要优先渲染主题内容部分，因此在DOM结构中需要将其写在左右侧边栏之前。

    <header>header</header>

    <main>
        <div class="mid">
            <div class="middle">middle</div>
        </div>
        <aside class="left">left</aside>
        <aside class="right">right</aside>
    </main>

    <footer>footer</footer>

样式表：
1. 左中右部分均左浮动，且左右设置定宽，中间设置宽度为100%，此时左右边栏完全被主体部分遮挡。
2. 负边距：左侧边栏的左负边距设置为100%，右侧边距的左负边距设置为自身宽度，此时左侧边栏在主体内容两侧排列，但主体内容位于侧边栏以下部分被遮挡。
3. 设置主体内容部分的左右边距为相应侧边栏宽度，以此收缩自身宽度，使其内容可完全展示。

        header{
            height: 70px;
            background-color: #EFE994;
        }

        main {
            height: 500px;
            overflow: hidden;
        }
        .mid {
            float: left;
            width: 100%;
            height: 100%;
            background-color: #98D8DA;
        }
        .middle {
            height:100%;
            margin-left: 200px;
            margin-right:200px;
        }
        .left,
        .right {
            float: left;
            width: 200px;
            height: 100%;
        }
        .left {
            margin-left: -100%;
            background-color: #FAC3FC;
        }
        .right {
            margin-left: -200px;
            background-color: #F5C4C4;
        }

        footer {
            height: 50px;
            background-color: #EFE994;
        }

二、弹性盒模型法

整个页面布局由两个弹性盒模型构成：
1. body作为盒子，header、main、footer按垂直方向排列，上下设置定高之后中间设置flex=1自动填满剩余高度。
2. main作为盒子，left、middle、right按水平方向排列（默认），左右设置定宽后中间设置flex=1自动填满剩余宽度。
3. 设置order=-1将左侧边栏拉到主体内容之前。

<!DOCTYPE html>
<meta charset=utf-8>
<html>
<head>
    <title>holy</title>
    <style type="text/css">
        body {
            display: flex;
            min-height: 100vh;
            flex-direction: column;
        }

        header,
        footer{
            flex-basis: 70px;
            background-color: #AAD6E1;
        }

        main {
            display: flex;
            flex: 1;
        }
        .middle {
            flex: 1;
            background-color: #eee;
        }
        .left,
        .right {
            flex-basis: 200px;
            background-color: #FEDAD6;
        }
        .left {
            order: -1;
        }

    </style>
</head>
<body>

    <header>header</header>

    <main>
        <div class="middle">middle</div>
        <aside class="left">left</aside>
        <aside class="right">right</aside>
    </main>

    <footer>footer</footer>

</body>
</html>

Vivian_jay

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
圣杯布局【双飞翼布局】的几种实现

圣杯布局：两边定宽，中间宽度自适应；且优先渲染中间主题内容部分。一、负边距法DOM结构：由于需要优先渲染主题内容部分，因此在DOM结构中需要将其写在左右侧边栏之前。 <header>header</header> <main> <div class="mid"> <div class="middle">middle</div>
复制链接

扫一扫