CSS显示模式

Div和Span标签

div作用: 一般用于配合css完成网页的基本布局

span作用: 一般用于配合css修改网页中的一些局部信息

<p>努力到<span>无能为力</span>, 拼搏到<span>感动自己</span></p>

div和span有什么区别?

  1.div会单独的占领一行,而span不会单独占领一行

  2.div是一个容器级的标签, 而span是一个文本级的标签

  3.容器级的标签和文本级的标签的区别?

     容器级的标签中可以嵌套其它所有的标签；常见容器级的标签: div h ul ol dl li dt dd ...；文本级的标签中只能嵌套文字/图片/超链接；常见文本级的标签:span p b u i s strong em ins del ...

CSS元素显示模式

在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级

在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素(其实还有一类, 行内块级)

☆☆☆ 块级元素：会独占一行，如果没有设置宽度, 那么默认和父元素一样宽，如果设置了宽高, 那么就按照设置的来显示；

☆☆☆ 行内元素：不会独占一行，如果没有设置宽度, 那么默认和内容一样宽，行内元素是不可以设置宽度和高度的。

☆☆☆ 行内块级元素：为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素，不独占一行, 并且可以设置宽高。

☆ 常见容器级的标签: div h ul ol dl li dt dd ...

☆ 常见文本级的标签:span p buis stong em ins del ...

☆ 常见块级元素: p div h ul ol dl li dt dd

☆ 常见行内元素: span b u i s strong em ins del

CSS元素显示模式转换

如何转换CSS元素的显示模式?

设置元素的display属性：display: inline; display: block; display: inline-block。

【Bloc：块级   inline：行内    inline-block：行内块级】

</p