马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2020-12-31 08:55 编辑
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
上一节实现了单列布局，这节来看两列和三列布局。
两列布局
最简单的方式就是使用浮动 float：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两列布局演示</title>
<style type="text/css">
.box {
width: 1024px;
}
.left {
width: 512px;
padding: 20px;
background-color: pink;
float: left;
}
.right {
width: 512px;
padding: 20px;
background-color: lightblue;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, ipsam earum excepturi eos quod distinctio
nihil modi blanditiis reprehenderit eligendi architecto error non magni dicta rerum suscipit qui repudiandae
corporis?</p>
</div>
<div class="right">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore nihil odio nulla pariatur necessitatibus in
cumque porro quaerat nemo aperiam vel praesentium corrupti ut, dolores reiciendis. Adipisci vero magnam optio.
</p>
</div>
</div>
</body>
</html>
现在 left 和 right 都是块级元素，所以上下布局。
在 left 和 right 中分别添加 box-sizing:border-box：
.left {
width: 512px;
padding: 20px;
background-color: pink;
float: left;
box-sizing: border-box;
}
.right {
width: 512px;
padding: 20px;
background-color: lightblue;
float: left;
box-sizing: border-box;
}
这个利用之前讲过的盒模型中，对于块级盒子设置为 border box，边框盒包裹内容和内边距。
两个盒子就会并排在一行显示。
这种方法比较简陋，随着页面缩小，元素不会自动适配。
想优化就需要外层设置 max-width 属性，内层设置 width 和 float:left：
.box {
/* 自适应修改 */
max-width: 1024px;
margin: auto;
}
.left {
/* 自适应修改 */
width: 50%;
padding: 20px;
box-sizing: border-box;
background-color: pink;
float: left;
}
.right {
/* 自适应修改 */
width: 50%;
padding: 20px;
box-sizing: border-box;
background-color: lightblue;
float: left;
}
很实用的技巧，请大家熟练掌握。
还有一种情况是侧栏固定宽度，主内容自适应的布局，用语义化标签来实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两列布局演示</title>
<style type="text/css">
aside {
width: 20%;
height: 500px;
background-color: pink;
float: left;
}
main {
width: 80%;
height: 500px;
margin-left: 20%;
background-color: lightblue;
}
</style>
</head>
<body>
<aside></aside>
<main></main>
</body>
</html>
边栏浮动到左侧，就会遮住右侧没有使用浮动的主内容。
可以对主内容施加一个 margin-left 属性，使其避开左侧内容的覆盖。
margin 属性的作用是设置元素的外边距，那这个外边距是如何弄出来的呢？
是通过移动自身的位置得到的。
比如这里我们设置 margin-left为20%，说明该元素向右移动 20% 的位置，这样左侧就有了 20% 的外边距啦。
好了，同样的效果，如果不使用浮动，我们还可以通过 position 属性来实现：
<style type="text/css">
aside {
width: 20%;
height: 500px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
}
main {
width: 80%;
height: 500px;
margin-left: 20%;
background-color: lightblue;
}
</style>
注意箭头所指支持，有空隙了！
absolute 属性是相对于最近一个设置了 position 属性值的祖先元素重新定位。
可以人为地给它包裹一个 position 属性为非 static 的父元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两列布局演示</title>
<style type="text/css">
aside {
width: 20%;
height: 500px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
}
main {
width: 80%;
height: 500px;
margin-left: 20%;
background-color: lightblue;
}
/* 新增外层 */
.container {
position: relative;
}
</style>
</head>
<body>
<div class="container">
<aside></aside>
<main></main>
</div>
</body>
</html>
三列布局
相对于两列布局来说，三列布局的灵活性得到了进一步的加强。
三列布局有几种经典方式：
我们一个一个来说。
浮动大法
此方法最简单，左边栏向左浮动，右边栏向右浮动，中间主内容同样通过设置左右 margin 来避开覆盖：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列布局演示</title>
<style type="text/css">
.left {
width: 200px;
height: 500px;
float: left;
background-color: pink;
}
.right {
width: 200px;
height: 500px;
float: right;
background-color: lightblue;
}
.center {
height: 500px;
margin: 0 200px;
background-color: cornsilk;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>
有两个点要注意：
- 中间主内容的 HTML 代码必须放在最后，否则右边栏会掉到下一行
- 中间主内容不能去指定它的宽度，因为我们需要中间列的宽度自适应，应该让它默认 auto 就可以了
绝对定位法
绝对定位法也是通过将左右两个边栏脱离文档流，并固定于左右两侧，中间主内容同样通过设置左右 margin 来避开覆盖：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列布局演示</title>
<style type="text/css">
.left {
width: 200px;
height: 500px;
position: absolute;
top: 0;
left: 0;
background-color: pink;
}
.right {
width: 200px;
height: 500px;
position: absolute;
top: 0;
right: 0;
background-color: lightblue;
}
.center {
height: 500px;
margin: 0 200px;
background-color: cornsilk;
}
.container {
position: relative;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
margin负值法
这个是最难理解滴！
在日常应用也比较广泛的像：圣杯布局和双飞翼布局
预知如何布局，请先去看：一份关于负外边距使用的权威指南
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（ 传送门）（ 不喜欢更要订阅 ） | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-11-29 09:57:27
置顶卡
千斤顶
显身卡
发表于 2020-11-29 10:59:16
发表于 2020-11-29 17:34:52
