057 - 三位一体(I)

不二如是 · 发表于 2020-11-16 08:20:25

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

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

x

本帖最后由不二如是于 2020-12-1 18:14 编辑

上一集：056 - 苟日新，日日新，又日新

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

在线视频：传送门

课程思维导图

猛戳

登录/注册后可看大图

超清

从本节开始我们就要进入布局部分啦。

其重要性毋庸置疑，哪个网页不需要布局呢？！

首先要明确：

行内元素和块级元素的布局方式是不一样滴

在进一步说就是，设置水平和垂直的方式不同。

先从简单的行内元素说起。

行内元素自身不具备居中和垂直，都是相对于其所在的父元素来说。

所以居中和垂直都要对父元素进行相应设置，先从水平开始：

<!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>

复制代码

在 div 中添加 text-align 属性后，可以看到 span 元素就水平居中：

垂直需要将 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>

复制代码

要记住当页面超过 main 元素最大宽度，header 和 footer 元素要和页面宽度一样。

课后作业，完成了吗？

传送门

登录/注册后可看大图

下一集：058 - 三位一体(II)

如果有收获，别忘了评分

：

登录/注册后可看大图

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

）

natapon · 发表于 2021-1-29 12:22:49

回复看看看

知了和蜜蜂 · 发表于 2021-3-15 10:23:26

13998929493 · 发表于 2021-4-19 09:39:28

O2H2O · 发表于 2021-7-14 17:28:24

看看原理

心驰神往 · 发表于 2021-8-4 10:44:08

hornwong · 发表于 2021-8-4 12:12:30

xing222 · 发表于 2021-8-17 12:33:40

666666666666666666

刘彩玲 · 发表于 2021-8-20 19:28:12

想看

douTREE · 发表于 2021-9-13 16:37:37

这里的父级元素是整个浏览器，四个属性值为0使得div在浏览器中撑开，div就有位置可以施展开来

c2514710281 · 发表于 2022-11-5 15:25:57

爱鱼C

小坛砸 · 发表于 2024-4-18 10:45:51

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

[学习笔记] 057 - 三位一体(I)

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

本帖被以下淘专辑推荐:

浏览过的版块