前几期，我们学习了样式表的语法，颜色，以及网页结构。
这一节我们要学习向页面添加更多的内容并控制他们的样式。
请打开下方链接：
https://10.1pxeye.com/docs/lucy.html
代码如下：
（ps：当然，代码也可以直接查看页面的源代码。）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>美丽的页面</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #F4F4F4;
padding: 50px;
font-family: "Microsoft Yahei", "微软雅黑", sans-serif;
font-size: 14px;
line-height: 1.8;
}
.content {
max-width: 800px;
margin: 0 auto;
background-color: #FFFFFF;
padding: 30px;
}
h1 {
font-size: 36px;
text-align: center;
margin-bottom: 20px;
line-height: 1.4;
}
.content>p {
text-indent: 2em;
}
.lyrics {
margin-top: 30px;
border-top: 1px dotted #000000;
padding-top: 20px;
}
.lyrics h2 {
font-size: 24px
}
.lyrics p {
padding-left: 2em;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="content">
<h1>Lucy in the sky with diamonds </h1>
<p>《Lucy in the Sky with Diamonds》一歌由John Lennon创作（署名为Lennon-McCartney）,收录于英国摇滚乐队The Beatles1967年专辑《Sgt. Pepper is Lonely Hearts Club Band》，这张专辑成为20世纪60年代最高销量专辑，并且至今也是包括英国和印度在内许多国家的最高销量录音室专辑。Lennon的儿子Julian在幼儿园画的一张名为“Lucy — in the sky with diamonds”的画是歌曲的灵感，歌曲发行后不久，人们便推测到歌曲标题的每一个大写字母正好可以拼成LSD。虽然Lennon对此否认，BBC仍然禁止播放这首歌。</p>
<div class="lyrics">
<h2>歌词</h2>
<p>Picture yourself in a boat on a river, With tangerine trees and marmalade skies<br>
Somebody calls you, you answer quite slowly, A girl with kaleidoscope eyes.<br>
Cellophane flowers of yellow and green,Towering over your head.<br>
Look for the girl with the sun in her eyes, And she is gone.<br>
Lucy in the sky with diamonds<br>
Lucy in the sky with diamonds<br>
Lucy in the sky with diamonds<br>
Ah... Ah... </p>
</div>
</div>
</body>
</html>代码是不是很简单？是不是很容易就能区分，哪部分是样式表，哪部分是主体内容？主体内容不用分解了，我们上节课已经剖析的很清楚。甚至比上节课讲的示例的结构还要简单。
这节课主要讲它的样式。
这节课的内容都吸收了，将会是一个很大的进步。
进入正题：
*号：
*号在这里代表所有元素。看里面的声明，margin:0;padding:0。
意思是让所有元素的外边距和内边距都设置为0。
这么做的目的是初始化边距,使所有元素的默认边距在所有浏览器上都是一样的。
这么设置的目的是，HTML里的元素默认都有边距。有的是0，有的是非0。而非0的边距，在各个浏览器上定义的还不完全一样,就是说每个浏览器的默认边距是不一样的。尤其在早期的一些浏览器上，差别更明显。有的能差10px。很恐怖的一个差别。
所以，在这里把这些初始值设置成0。这样就可以保证元素在各个浏览器上，在没有被定义样式的情况下默认边距是一样的。
margin属性：
用来定于元素外边距。
围绕在元素边框的空白区域就是外边距。
设置外边距会在元素外创建额外的“空白”。
这个属性接受任何长度单位、相对数值、百分数值甚至负值。
外边距有：
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距
假设给类名为content的元素设置边距，上下边距为20px，左右边距为30px。
写法是：
.content{
margin-top:20px;
margin-right:30px;
margin-bottom:20px;
margin-left:30px
}哇唔，要背好多个单词。设置一个边距整这么麻烦…
有简写：
.content{
margin:20px 30px 20px 30px;
}规则就是，从顶部开始，顺时针方向列出所有值。
哇靠，好高的逼格。
…
逼格还不够。还可以这么写：
.content{
margin:20px 30px;
}当上边距和下边距一样，左边距和右边距一样的时候可以这么写。
规则是，margin:[上下边距] [左右边距];
什么?！
嗯。
那有没有3个值的情况？
有！当左右边距一样，上下边距不一样的时候。
假设上面样式里下边距改成0px。那么：
.content{
margin:20px 30px 0;
}规则是：
margin:[上边距] [左右边距] [下边距]；
斯国一捏…
那上下边距一样，左右边距不一样呢？>_>
…
那还是需要4个值，三个值的写法是为左右边距相同时准备的。
那有没有1个值的？-_-
有！就是四个边距都一样的时候只写一个值就可以。
.content{
margin:0
}那值为0的时不用写单位么？
呃…有经验的人知道什么时候必须写，什么时候不用写。出于安全考虑。还是先写上吧-_-
还有，一定要把四个值都写出来么？即便我只想设置上边距。
不用，因为刚开始的时候设置了全局的边距设置，默认都是0了。只要对想设置的边设值就可以了。
.content{
margin-top:20px
}这样就可以了。
哇唔…
以上外边据的写法，同样适用于padding（内边距）。
margin的外边距合并特性。https://10.1pxeye.com/collapsing-margins/
padding属性：
元素的内边距在边框和内容区之间。
padding属性用来定义元素边框与元素内容之间的空白区域。
它同样有四个值：
padding-top
padding-right
padding-bottom
padding-left
用法和表达方式跟上面的margin（外边据）是一样的。只是一个是外边距，一个是内边距。
最后再补充点，通常说边距的时候一般指的是外边距margin。
外边距margin是用来与其它元素拉开距离的。
内边距padding是用来给元素自身边框向内填充余白（空间）的。
这节课就讲到这里。下节课讲本节课例子当中剩下的css属性。
评论区
发表新的留言
您可以留言提出您的疑问或建议。
您的留言得到回复时，会通过您填写的邮箱提醒您。