一、span的使用
1、span简要介绍：<span></span>只是一个容器，没有特殊意义，用于包裹文本，便于给文本增加样式。
2、案例使用：
1）.“1、幸运，是另外一种实力”居中，设置文字的背景颜色以及文字的大小
text-align：center;文字居中、background-color: aliceblue;背景色设置、font-size: 16px;文字大小、color：blue;文字颜色
<p style="text-align: center;background-color: aliceblue;font-size: 16px;color: blue;">
1、幸运，是另外一种实力
</p>效果：
2).该段落的都被设置了背景色，不满足要求，应使用span容器包裹文字设置背景色
<p style="text-align: center;">
<span style="background-color: aliceblue;font-size: 16px;color: blue;">
1、幸运，是另外一种实力
</span>
</p>效果：
二、div的使用
1、div的简要介绍：<div></div>只是一个容器，没有特殊意义，可以包裹任何内容，也可以直接相互包裹。
2、div使用案例：
1).让某篇文章居中显示，设置该篇文章的所有文字颜色
原始代码：
<p style="text-align: center;">
<span style="background-color: aliceblue;font-size: 16px;color: blue;">1、幸运，是另外一种实力</span>
</p>
<p>大家都说C是朋友中最幸运的女人——“幸运”是个感情复杂的词，
一边带着赞叹和羡慕，另一边，多少有点实力不够意外胜出的腹诽。</p>
<p>
很多人以为生命中的贵人是被隆重的仪式感安排好，站在聚光灯下深情等待，
现实却是，ta或许就在某个不起眼的角落，在某个不经意的片段，成年累月地观察和打量你，
考虑成熟才会向你伸出点石成金的金手指。
</p>
<p>
所以，所谓幸运的人，都特别擅长把握稍纵即逝的机会。
</p>效果：
2、在最外层嵌套div，设置文字样式，并给div设置宽度，让其居中显示
<div style="color: gray;width: 600px;margin: auto;text-align: justify;">
<p style="text-align: center;">
<span style="background-color: aliceblue;font-size: 16px;color: blue;">1、幸运，是另外一种实力</span>
</p>
<p>大家都说C是朋友中最幸运的女人——“幸运”是个感情复杂的词，
一边带着赞叹和羡慕，另一边，多少有点实力不够意外胜出的腹诽。
</p>
<p>
很多人以为生命中的贵人是被隆重的仪式感安排好，站在聚光灯下深情等待，
现实却是，ta或许就在某个不起眼的角落，在某个不经意的片段，成年累月地观察和打量你，
考虑成熟才会向你伸出点石成金的金手指。
</p>
<p>
所以，所谓幸运的人，都特别擅长把握稍纵即逝的机会。
</p>
</div>效果：
3、代码解读：margin设置外边距，当为auto时，该元素则会水平居中显示，auto属性表示指定div所占的宽度，让其两侧均匀分布。如果没有指定宽度，div默认宽度为父级宽度的100%,在上述代码中，若没有width: 600px;则div占据屏幕宽度的100%，两侧没有剩余空间，也不会达到居中效果。
三、总结：
1、容器标签：
容器标签 | 作用 | 特性 | css特性 |
span | 只能包裹行内元素 | 行内元素 | 多个span不会换行，只能设置左右边距，不能设置上下边距，宽高受内容影响 |
div | 包裹一切元素 | 块级元素 | 多个div会另起一行，可以设置上下左右边距，设置元素的宽高,div默认宽度100%，高度0px |
2、margin：外边距，可以设置上下左右边距
1).表示方法：
如：margin：n1px n2px n3px n4px;（n1,n2,n3,n4分别表示上右下左外边距的值）
margin: n1px n2px;（n1表示上下，n2表示左右）
margin: auto;（左右空间平均分布，水平居中）
