圣杯布局和双飞翼布局

这两种布局实际上就是考察对float和margin负值的掌握，这两点搞清楚问题就不大了

首先是圣杯布局

在这里插入图片描述

code部分：

<body>
    <div class="header">头部div>
    <div class="wrapper">
        <div class="item center">主区域div>
        <div class="item left">左区域div>
        <div class="item right">右区域div>
    div>
    <div class="footer">底部div>
    <style>
        .header {
            background-color: rgb(228, 19, 19);
        }
        .center {
            background-color: aqua;
            width: 100%;
        }
        .left {
            background-color: rgb(15, 45, 235);
            position: relative;
            width: 150px;
            margin-left: -100%;
            left: -150px;
        }
        .right {
            background-color: blueviolet;
            width: 200px;
            margin-right: -200px;
        }
        .footer {
            background-color: darkgreen;
            clear: both;
        }
        .item {
            float: left;
        }
        .wrapper {
            padding-left: 150px;
            padding-right: 200px;
        }
    style>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

双飞翼布局

在这里插入图片描述

code部分：

<body>
    <div class="header">头部div>
    <div class="main">
        <div class="center">主区域div>
    div>
    <div class="left">左区域div>
    <div class="right">右区域div>
    <div class="footer">尾部div>
    <style>
        .header, .footer {
            background-color: aqua;
        }
        .main {
            float: left;
            width: 100%;
            background-color: brown;
        }
        .center {
            margin: 0 150px;
        }
        .left {
            float: left;
            width: 150px;
            margin-left: -100%;
            background-color: crimson;
        }
        .right {
            float: left;
            width: 150px;
            margin-left: -150px;
            background-color: darksalmon;
        }
        .footer {
            clear: both;
        }
    style>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

注意观察二者的html标签的不同

不清楚为什么的可以看技术蛋老师的视频，CSS圣杯布局和双飞翼布局 - Web前端工程师面试题讲解_哔哩哔哩_bilibili

相关阅读:
SpringBoot之JdbcTemplate输出完整SQL日志
springmvc国际化
赢麻了！smardaten闷声干大事，竟然用无代码开发了复杂小程序！
【数据结构】数组和字符串（二）：特殊矩阵的压缩存储：对角矩阵——一维数组
k8s使用
使用 Elastic 和 LM Studio 的 Herding Llama 3.1
IDaaS系统 ArkID默认审批系统插件配置流程及具体有什么功能
Spring refresh 方法分析之一
git命令总结
Go mod 使用私有git仓库依赖包

原文地址：https://blog.csdn.net/m0_51126511/article/details/127130439