老旧的三栏布局方式：圣杯布局、双飞翼布局

最新推荐文章于 2024-06-17 00:08:19 发布

Hello world&&

最新推荐文章于 2024-06-17 00:08:19 发布

阅读量105

点赞数

分类专栏：双飞翼布局圣杯布局文章标签： css html html5 css3 定位

本文链接：https://blog.csdn.net/weixin_45806709/article/details/115567432

版权

双飞翼布局同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

圣杯布局

1 篇文章 0 订阅

订阅专栏

简单老旧的三栏布局方式：圣杯布局、双飞翼布局

前言
一、圣杯布局
二、双飞翼布局
注意事项
- 1.相比较两种布局方式：
问题解答

前言

随着前端技术的不断发展，flex和grid布局是趋势所在，但是一些项目仍然使用圣杯布局和双飞翼布局方式，学习其实现方法也可以对我们对于html.css的盒模型理解加深。

一、圣杯布局

1.代码如图

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 80%;
            text-align: center;
            margin: 0 auto;
            min-width: 600px;
        }

        header,
        footer {
            height: 100px;
            background-color: darkgray;
            border: 1px solid #ccc;
        }

        .main,
        .left,
        .right {
            float: left;
            height: 200px;
        }

        /* 清楚浮动 */
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        .bd {
            padding: 0 200px;
            background-color: darkorchid;
            line-height: 200px;
        }

        .left {
            width: 200px;
            margin-left: -200px;
            background-color: darkgreen;
            position: relative;
            left: -200px;
        }

        .right {
            width: 200px;
            background-color: darkkhaki;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }

        .main {
            width: 100%;
            background-color: darkorange;
        }
    </style>
</head>

<body>
    <header></header>
    <div class="bd clearfix">
        <div class="main">主体</div>
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
    <footer></footer>
</body>

</html>

2.效果图

在这里插入图片描述

3.原理解释

1.未添加浮动和定位时如图，此时，由于主体、左侧、右侧均为块元素，效果如图所示（已设置bd盒子padding左右内边距200px）
在这里插入图片描述
2.主体和左侧右侧添加浮动后，由于主体的宽度与父盒子宽度一致，所以左侧和右侧两个盒子并未不能与主体盒子在一行放开，此时被挤在第二行，想让左侧盒子上移一层值主体最左边，需要添加外边距，外边距为父盒子的宽度，但父盒子宽度为变化的值，所以设置左侧外边距为margin-left：100%；
在这里插入图片描述
3.添加左侧的外边距后，右侧由于向左浮动，变成如下图所示的位置，此时也需要将右侧上移至主体行的最右侧，所以也需要添加一个负的外边距值，值为右侧盒子的宽度。

4.添加完浮动后的效果如下，但此时由于紫色盒子的内边距存在，左侧和右侧盒子将盖住主体的一部分内容，此时需要添加定位将左侧盒子和右侧盒子继续移动，左侧盒子需要移动左侧盒子的距离，也就是紫色盒子的左内边距，右侧盒子同理。在这里插入图片描述
5.添加定位后的图如下此时拖动改变窗口大小，主体部分会动态变化，而左侧和右侧大小固定不变。

二、双飞翼布局

1.代码如下

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header,
        footer {
            width: 100%;
            height: 100px;
            background-color: gainsboro;
        }

        body {
            width: 80%;
            margin: 0 auto;
            text-align: center;
        }

        .box {
            float: left;
            height: 100px;
            width: 100%;
            height: 100px;
        }

        .main {
            margin: 0 200px;
            height: 100%;
            background-color: darksalmon;
        }

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

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

        .clearfix {
            contain: "";
            display: block;
            clear: both;
        }
    </style>
</head>

<body>
    <header></header>
    <div class="box">
        <div class="main">主体</div>
    </div>
    <div class="left">左侧</div>
    <div class="right">右侧</div>
    <footer class="clearfix"></footer>
</body>

</html>

代码如下（示例）：

2.效果图

在这里插入图片描述

2.原理解释

双飞翼布局未采用定位，而是将主体部分单独包裹在一个盒子中，对该盒子设置浮动，对主体盒子只进行外边距的设置，左边距为左侧盒子的宽度，右边距为右侧盒子的宽度，此时对左侧盒子，右侧盒子，主体部分的父盒子添加浮动后，主体先排列上，然后左侧盒子和右侧盒子设置负外边距使其处于同一行，实现最终效果。

注意事项

1.由于盒子添加浮动后会产生塌陷问题，所以要注意清除浮动。
2.使用css3新盒子模型会简化代码。

1.相比较两种布局方式：

1）圣杯布局较为直观。
2）双飞翼布局css代码量较少。

问题解答

1.为什么不能一个左浮动，一个右浮动？

一左一右浮动会使结构变得不稳定，尽量全部是使用左浮动。

2.为什么一定要把主体部分放在前面？

以为代码是从上往下执行的，主体部分是核心内容，一般优先级更高。

3.为什么不用calc？

css表达式是一种强大且危险的方式，w3c也不推荐。

Hello world&&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
老旧的三栏布局方式：圣杯布局、双飞翼布局

简单老旧的三栏布局方式：圣杯布局、双飞翼布局前言一、圣杯布局1.代码如图2.效果图3.原理解释二、双飞翼布局1.代码如下2.效果图2.原理解释注意事项1.相比较两种布局方式：问题解答1.为什么不能一个左浮动，一个右浮动？2.为什么一定要把主体部分放在前面？3.为什么不用calc？前言随着前端技术的不断发展，flex和grid布局是趋势所在，但是一些项目仍然使用圣杯布局和双飞翼布局方式，学习其实现方法也可以对我们对于html.css的盒模型理解加深。一、圣杯布局1.代码如图<!DOC.
复制链接

扫一扫

专栏目录