052 - 总为浮云能蔽日（下）

不二如是 · 发表于 2020-9-8 23:47:50

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2020-9-24 18:38 编辑

上一集： 051 - 总为浮云能蔽日（上）

哈哈，废话不多说了，#敲黑板时刻！

在线视频：传送门

课程思维导图

猛戳

登录/注册后可看大图

超清

基础的两列布局中元素部分代码：

<h1>两列布局演示</h1>
<div class="left">
<h2>右侧列巴拉巴拉</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est exercitationem sint animi harum minima veritatis
itaque asperiores numquam cupiditate, odio ad nobis tempore doloribus facilis. Inventore itaque quis obcaecati
adipisci?</p>
</div>
<div class="right">
<h2>右侧列巴拉巴拉</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque natus ducimus, corporis veritatis obcaecati, illo
ex nemo corrupti dicta a iusto totam in nostrum. Accusamus fugit ut magnam facilis facere!</p>
</div>

复制代码

样式：

div.left {
background-color: pink;
width: 50%;
float: left;
}
div.right {
background-color: lightblue;
width: 50%;
float: right;
}

复制代码

效果：

如果两个 div 都加上：

padding: 20px;

复制代码

效果：

发现左右被挤到两行。

因为默认情况下的宽度都是元素内容的宽度。

这样设置 padding 后就超过整体父元素的 50%，所以就变成了两行。

如果设置 box-sizing 属性值为 border-box，那么宽度就包含到边框的位置。

这样就不会超过，在每个 div 样式中添加：

box-sizing: border-box;

复制代码

效果就和刚开始看的一样了。

三列布局

基础元素：

<h1>三列布局演示</h1>
<div class="left">
<h2>右侧列巴拉巴拉</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est exercitationem sint animi harum minima veritatis itaque asperiores numquam cupiditate, odio ad nobis tempore doloribus facilis. Inventore itaque quis obcaecati adipisci?</p>
</div>
<div class="middle">
<h2>中间列巴拉巴拉</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est exercitationem sint animi harum minima veritatis itaque asperiores numquam cupiditate, odio ad nobis tempore doloribus facilis. Inventore itaque quis obcaecati adipisci?</p>
</div>
<div class="right">
<h2>右侧列巴拉巴拉</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque natus ducimus, corporis veritatis obcaecati, illo ex nemo corrupti dicta a iusto totam in nostrum. Accusamus fugit ut magnam facilis facere!</p>
</div>

复制代码

样式：

div.left {
background-color: pink;
width: 33.33%;
float: left;
padding: 20px;
box-sizing: border-box;
}
div.middle {
background-color: cornsilk;
width: 33.33%;
float: right;
padding: 20px;
box-sizing: border-box;
}
div.right {
background-color: lightblue;
width: 33.33%;
float: right;
padding: 20px;
box-sizing: border-box;
}

复制代码

效果：

如果理解上面两列的，三列一样，平均分成 3 份而已。

一个“坑”在于：

游客，如果您要查看本帖隐藏内容请回复

如果将 .middle 的 float 属性值改为 right，顺序就变了：

这里算是一个重点，涉及了代码执行顺序和浮动方向的问题。

默认代码按从上至下顺序执行，先执行 .left，然后是 .middle，最后是 .right

分别 float 值为：left、left、right 进行布局。

而如果将 .middle 的 float 改为 right，执行顺序不变：.left 还是左浮动、.middle 右浮动霸占了右边，.right 的右浮只能在其左侧靠右了。

要理解浮动是讲究：

先来后到

继续往下看。

clear 属性

有浮动，就有清除浮动，没错，就是设置 clear 属性。

但是注意了：

clear 是清除设置该属性的元素指定边的浮动效果

简单一段代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style type="text/css">
.box {
background-color: green;
width: 200px;
height: 200px;
}
.bc {
background-color: red;
width: 50px;
height: 50px;
}
.left {
float: left;
}
.right {
float: right;
}
.clear-left {
clear: left;
}
.clear-right {
clear: right;
}
</style>
</head>
<body>
<div class="box">
<div class="bc left"></div>
<div class="clear-left">我爱鱼C,ilovefishc.com,我爱Web开发，我爱小甲鱼</div>
</div>
<br><br>
<div class="box">
<div class="bc right"></div>
<div class="clear-right">我爱鱼C,ilovefishc.com,我爱Web开发，我爱小甲鱼</div>
</div>
</body>
</html>

复制代码

效果：

默认情况下，如果 .bc 设置浮动，下面的 div 元素中的文字就会环绕上去。

现在分别设置清除不同边的浮动，文字都会乖乖的在下面，不会自动环绕上去。

要知道：

设置 float会影响其他相邻元素；

设置 clear 只会影响自身，不会对其他相邻元素造成影响

上面这句话要好好体会哦～

课后作业，完成了吗？

传送门

登录/注册后可看大图

下一集：053 - 你的定位决定你的地位

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅淘专辑（传送门）（不喜欢更要订阅

）

younasd · 发表于 2020-9-23 15:29:40

不懂啊啊

natapon · 发表于 2021-1-19 16:02:10

好棒，谢谢分享！

上游小坤 · 发表于 2021-1-26 21:28:25

不错，谢谢

心驰神往 · 发表于 2021-8-4 09:40:01

douTREE · 发表于 2021-9-13 09:50:16

存在空格，会换到下一行

Dragon.水魅 · 发表于 2021-11-5 09:24:05

代码实现是有先后顺序的，middle的right的会现在页面右侧实现，right的right就只能在中间。

c2514710281 · 发表于 2022-11-2 19:57:13

爱鱼C

小坛砸 · 发表于前天 17:26

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 052 - 总为浮云能蔽日（下）

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐: