一、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;(左右空间平均分布,水平居中)