马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2020-12-1 18:14 编辑
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
从本节开始我们就要进入布局部分啦。
其重要性毋庸置疑，哪个网页不需要布局呢？！
首先要明确：
在进一步说就是，设置水平和垂直的方式不同。
先从简单的行内元素说起。
行内元素自身不具备居中和垂直，都是相对于其所在的父元素来说。
所以居中和垂直都要对父元素进行相应设置，先从水平开始：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>居中/垂直演示</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: #cb4042;
/* 水平居中 */
text-align: center;
}
span {
font-size: 20px;
}
</style>
</head>
<body>
<div><span>我是行内元素</span></div>
</body>
</html>
垂直需要将 span 元素的 line-height 设置为父元素高度，在 span 样式中添加：
span {
font-size: 20px;
/* 垂直居中 */
line-height: 200px;
}
而块级元素的水平和垂直稍微复杂些，我们逐个来说。
上面代码实现的都是 span 元素基于 div 进行水平或垂直居中。
对于块级元素，我们直接拿外层 div 元素来做水平和垂直居中。
先做水平居中，在 div 中添加 margin：0 auto：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>居中/垂直演示</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: #cb4042;
/* span水平居中 */
text-align: center;
/* div整体居中 */
margin: 0 auto;
}
span {
font-size: 20px;
/* span垂直居中 */
line-height: 200px;
}
</style>
</head>
<body>
<div><span>我是行内元素</span></div>
</body>
</html>
块级元素默认是霸占整行的宽度，给其设置了一个固定的宽度之后。
该元素所在的这一行就拥有了可以被分配的剩余空间。
所以将其 margin 属性的左右两侧设置为 auto，则自动平分剩余空间，即实现水平居中。
块级元素的垂直居中算是本节课难点。
需要利用 position 属性来实现，在 div 中添加：position：absolute 。
还需要将 top、right、bottom、left 四个属性值均设置为 0 。
最后将 margin 改为 auto：
div {
width: 200px;
height: 200px;
background-color: #cb4042;
/* span水平居中 */
text-align: center;
/* div垂直和水平居中 */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
简单解释（课程中小甲鱼老师有细说）：
这是本节课重点，希望鱼油掌握！
最后的单列布局，不算太难，知道就好。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单列布局演示</title>
<style type="text/css">
header,
main,
footer {
max-width: 1024px;
margin: 0 auto;
text-align: center;
}
header {
height: 50px;
line-height: 50px;
background-color: pink;
}
main {
height: 200px;
line-height: 200px;
background-color: cornsilk;
}
footer {
height: 50px;
line-height: 50px;
background-color: lightblue;
}
</style>
</head>
<body>
<header>头部</header>
<main>内容</main>
<footer>尾部</footer>
</body>
</html>
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（ 传送门）（ 不喜欢更要订阅 ） | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-11-16 08:20:25
置顶卡
千斤顶
显身卡
发表于 2021-1-29 12:22:49
发表于 2021-3-15 10:23:26
