【CSS】看了C站CSDN源码，这次带你彻底搞清楚经典的 双飞翼布局 与 圣杯布局 - margin负值 - 浮动 - padding

于 2021-07-06 14:41:50 发布
阅读量346 收藏 3
点赞数
分类专栏： HTML&CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44972008/article/details/118500857
版权

文章目录

今天来学习两种经典的PC端局部——双飞翼布局&圣杯布局
这两种布局方式都是使用float来完成，是float的典型应用

两种都是经典的三栏布局，比如我们的【CSDN】就是这样的布局方式
在这里插入图片描述
我们来看看页面源码
在这里插入图片描述
在探索布局之前，我们先来回顾以下margin负值的情况

1. margin负值

1.1 上下盒子情况图解

<div class="box1"></div>
<div class="box2"></div>

css

.box1{
  width: 200px;
  height: 200px;
  border: 2px solid pink;
}

.box2 {
  width: 200px;
  height: 200px;
  border: 2px solid skyblue;
}

在这里插入图片描述

上盒子 margin-top: -100px

对于上面的盒子 设置margin负值的情况

margin-top: -100px;

在这里插入图片描述
上面的盒子会向上移动100px，下面的盒子会紧贴着上面的盒子

上盒子 margin-botton: -100px

此时，上面的盒子不动，下面的盒子会向上移动100px
在这里插入图片描述

下盒子 margin-top: -100px

这种情况和上盒子margin-botton一样的
在这里插入图片描述

下盒子 margin-bottom: -100px

页面没有变化
在这里插入图片描述

1.2 上下盒子总结

对于上下盒子
上盒子 margin-top 负值，上下盒子都会向上移动
上盒子 margin-bottom 负值，上盒子不动，下盒子会向上移动
下盒子 margin-top 负值，上盒子不动，下盒子会向上移动
下盒子 margin-bottom 负值，上下盒子都不会动

1.3 左右盒子总结

其实左右盒子的情况也是类似的
这里直接给出总结吧

对于左右盒子
左盒子 margin-left 负值，左右盒子都会向左移动
左盒子 margin-right 负值，左盒子不动，右盒子会向左移动
右盒子 margin-left 负值，左盒子不动，右盒子会向左移动
右盒子 margin-right 负值，左右盒子都不会动

先来看看比较简单的双飞翼布局吧~~

2. 双飞翼布局

2.1 目标

两侧内容宽度固定，中间内容宽度自适应
三栏布局，中间一栏最先加载、渲染出来（主要内容）
实现方式 【浮动+margin负值】

2.2 初始化

要先加载主区域，所以将主区域写在前面

<body>
  <header>头部</header>
  <div class="main">
    <div class="center">主区域</div>
  </div>
  <div class="left">左区域</div>
  <div class="right">右区域</div>
  <footer>底部</footer>
</body>

css基础样式

header {
  background-color: pink;
}

.main {
  width: 100%;
  background-color: skyblue;
}

.left {
  width: 100px;
  background-color: green;
}

.right {
  width: 100px;
  background-color: red;
}

footer {
  background-color: pink;
}

2.3 初始页面

在这里插入图片描述

2.4 开启双飞翼

1. 开启浮动 float

先给三个区域开启浮动
底部清除浮动

<header>头部</header>
<div class="main float_left">
  <div class="center">主区域</div>
</div>
<div class="left float_left">左区域</div>
<div class="right float_left">右区域</div>
<footer>底部</footer>

.float_left {
  float: left;
}

footer {
  background-color: pink;
  clear: both;
}

在这里插入图片描述

2. 主区域两边留空 margin

下面要做的就是把主区域左右两侧各留出100px给左区域和右区域
这里就使用margin来操作

.center {
  margin: 0 100px;
}

在这里插入图片描述
可以看到主区域以及留出两边的位置了

3. 两侧区域上来 margin负值

.left {
  width: 100px;
  background-color: green;
  margin-left: -100%;
}

.right {
  width: 100px;
  background-color: red;
  margin-left: -100px;
}

对于左侧区域，采用的是 margin-left: -100%;
在这里插入图片描述
对于右侧区域，就很好办了，只需向左移动它自身的距离即可 margin-left: -100px;

2.5 双飞翼布局页面

在这里插入图片描述
双飞翼完成~

接下来是圣杯局部

3. 圣杯布局

3.1 目标

两侧内容宽度固定，中间内容宽度自适应
三栏布局，中间一栏最先加载、渲染出来（主要内容）
实现方式 【浮动+margin负值+定位】

3.2 初始化

<header>头部</header>
<div>
  <div class="center">主区域</div>
  <div class="left">左区域</div>
  <div class="right">右区域</div>
</div>
<footer>底部</footer>

header {
  background-color: pink;
}

.center {
  width: 100%;
  background-color: skyblue;
}

.left {
  background-color: green;
  width: 100px;
}

.right {
  width: 100px;
  background-color: red;
}

footer {
  background-color: pink;
}

3.3 初始页面

在这里插入图片描述

3.4 开启圣杯

1. 开启浮动float

三个区域开启浮动
在三个区域的外面清除浮动

<header>头部</header>
<div class="clearfix">
  <div class="center float_left">主区域</div>
  <div class="left float_left">左区域</div>
  <div class="right float_left">右区域</div>
</div>
<footer>底部</footer>

.float_left {
  float: left;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

在这里插入图片描述

2. 主区域两边留空 padding

<header>头部</header>
<div class="clearfix wrapper">
  <div class="center">主区域</div>
  <div class="left">左区域</div>
  <div class="right">右区域</div>
</div>
<footer>底部</footer>

.wrapper {
  padding: 0 100px;
}

在这里插入图片描述

3. 两侧区域上来 margin负值+定位

左侧区域上去
首先 margin-left: -100%;
在这里插入图片描述
再让左区域相对自己向左移动自身距离

.left {
  background-color: green;
  width: 100px;
  margin-left: -100%;
  position: relative; 
  left: -100px;
}

在这里插入图片描述
下面是让右侧区域上去 margin-right: -100px;

3.5 圣杯布局页面

在这里插入图片描述

4. 总结

两种布局形式上是一样的，实现起来
双飞翼布局稍微简单一点，利用

  1. 开启浮动+清除浮动
  2. 主区域两侧留白【margin】
  3. 两侧上去【margin负值】

圣杯布局稍微复杂一点

  1. 开启浮动+清除浮动
  2. 主区域两侧留白 【padding】
  3. 两侧上去【margin负值+相对定位】
YK菌
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值