CSS---圣杯布局与双飞翼布局

最新推荐文章于 2023-07-14 00:04:23 发布

maidu_xbd

最新推荐文章于 2023-07-14 00:04:23 发布

阅读量138

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/maidu_xbd/article/details/97153119

版权

CSS 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

圣杯布局和双飞翼布局：

两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。

圣杯布局来源于文章In Search of the Holy Grail，而双飞翼布局来源于淘宝UED

遵循特点：

两侧宽度固定，中间宽度自适应
中间部分在DOM结构上优先，以便先行渲染
允许三列中的任意一列成为最高列
只需要使用一个额外的<div>标签

圣杯布局：

步骤

1.写下HTML代码

<div class="container">
	<div class="main">中间</div>
	<div class="left">左边</div>
	<div class="right">右边</div>
</div>

2. 使三个区域都处于左浮动状态，并使main的宽度成父容器的100%；

3. 为两侧侧边栏添加负margin，用以调整位置，其中摆在左边的left的margin-left为-100%，而右边right的margin-left则为负的其自身的宽度。（利用了浮动元素的负margin到一定值后会使其自身往上一行移动的原理）

4. 为class="container"的主容器设置左右padding值，使其为以后的侧边栏定位空出位置，padding的值为侧边栏的宽。

5. 对left和right添加position:relative，然后对它们进行定位，移动到两侧，圣杯布局就初步做完了

圣杯布局代码：

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

<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
    body {
        margin: 0;
        padding: 0;
    }

    .container {
        min-width: 400px;
        height: 200px;
        background-color: #ccc;
        /*预留出位置*/
        padding: 0 200px;
    }

    .left,
    .right {
        width: 200px;
        height: 200px;
        background-color: gold;
        float: left;
    }

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

    .left {
        margin-left: -100%;
        position: relative;
        left: -200px;
    }

    .right {
        margin-left: -200px;
        position: relative;
        right: -200px;
    }
    </style>
</head>

<body>
    <!--容器-->
    <div class="container">
        <div class="main">中间</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
</body>

</html>

双飞翼布局：

双飞翼布局不仅能满足main处于优先加载的地位，而且更好的解决了圣杯布局的错乱问题，且css代码更简单，缺点是增加了一个标签。

步骤(基于圣杯布局下)：

1.给main里面添加一个内容标签main-content，并且设置它的左右margin值为左右侧边栏的宽度

双飞翼布局代码：

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

<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
    body {
        margin: 0;
        padding: 0;
    }

    .container {
        min-width: 400px;
        height: 200px;
        background-color: #ccc;
    }

    .left,
    .right {
        width: 200px;
        height: 200px;
        background-color: gold;
        float: left;
    }

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

    .main-content {
        margin: 0 200px;
    }

    .left {
        margin-left: -100%;
    }

    .right {
        margin-left: -200px;
    }
    </style>
</head>

<body>
    <!--容器-->
    <div class="container">
        <div class="main">
            <div class="main-content">中间</div>
        </div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
</body>

</html>