马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2020-9-24 18:38 编辑
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
基础的两列布局中元素部分代码：
<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 后就超过整体父元素的 50%，所以就变成了两行。
如果设置 box-sizing 属性值为 border-box，那么宽度就包含到边框的位置。
这样就不会超过，在每个 div 样式中添加：
效果就和刚开始看的一样了。
三列布局
基础元素：
<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 只会影响自身，不会对其他相邻元素造成影响
上面这句话要好好体会哦～
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（ 传送门）（ 不喜欢更要订阅 ） | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-9-8 23:47:50
置顶卡
千斤顶
显身卡
发表于 2020-9-23 15:29:40
发表于 2021-1-19 16:02:10
