057 - 三位一体(I)
本帖最后由 不二如是 于 2020-12-1 18:14 编辑上一集：056 - 苟日新，日日新，又日新
哈哈，废话不多说了，#敲黑板时刻！{:10_281:}
在线视频：传送门
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
从本节开始我们就要进入布局部分啦。
其重要性毋庸置疑，哪个网页不需要布局呢？！
首先要明确：
行内元素和块级元素的布局方式是不一样滴
在进一步说就是，设置水平和垂直的方式不同。
先从简单的行内元素说起。
行内元素自身不具备居中和垂直，都是相对于其所在的父元素来说。
所以居中和垂直都要对父元素进行相应设置，先从水平开始：
<!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;
}
效果：
简单解释（课程中小甲鱼老师有细说）：
**** Hidden Message *****
这是本节课重点，希望鱼油掌握！
最后的单列布局，不算太难，知道就好。
代码：
<!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 元素要和页面宽度一样。
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：058 - 三位一体(II)
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅{:10_297:} ） 回复看看看 {:10_256:} 132 看看原理 1 {:5_95:} 666666666666666666 想看 这里的父级元素是整个浏览器，四个属性值为0使得div在浏览器中撑开，div就有位置可以施展开来 爱鱼C {:10_312:}
页:
[1]