在CSS中,不同的标签其所具有的特性不同,我们根据特性可以将它们分为以下3种:

块级标签,行级标签,行级块标签.
下面我们来一一进行介绍:

块级标签:
无论内容的多少,都只会占用一行的标签称为块级标签
- 常用块级标签如下: <h>,<p>,<ul>,<li>
- 块级标签可以设置标签的宽高
- 默认大小: 宽: 与父级标签的宽一致高: 0/与内容的高一致
行级标签:
只占自身大小的标签，不会占一行的称为行级标签
- 行级标签不能设置宽高
- 常见的行级标签如下: <a>,<b>,<u>
行级块标签:

可以设置大小,但不占一行的标签称为行级块标签
- 常见的行级块标签如下: <input>,<img>

各标签的代码示例如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 块级标签p h1 ul ol--><p>这是一个块级标签</p><h1 class="h1">这是一个块级标签</h1><br /><!-- 行级标签--><a href="CSS基本语法.html">行级标签</a><!-- 行级块标签input img--><input style="width: 500px; height: 300px;" /></body>
</html>

运行结果如下:

我们可以看到,块级标签每次占用了一行的位置.而行级标签只占用它自身的大小的位置

注意:

一般情况下,使用块级标签包含行级标签;不适用行级标签包含块级标签
a (超链接)可以包含任何标签,除去a本身
p 标签不可以包含任何的块级标签

下面我们再来介绍一些关于标签额外的知识:

①Display的用法

通过display样式,我们可以修改标签的类型,使之变为我们想要的类型

可选值如下：
- block ：设置标签为块标签
- inline ：设置标签为行级标签
- inline-block ：设置标签为行级块标签
- none ：隐藏标签（标签将在页面中完全消失）

代码示例:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.h1{display: inline-block; /* 设置标签的样式为指定类型*/}</style></head><body><p>这是一个块级标签</p><h1 class="h1">这是一个块级标签</h1><br /></body>
</html>

②div和span标签

div和span是两个没有任何功能的纯净标签,下面我们来进行简单介绍:

div标签:
- div是块级标签，可以放置任何标签。
- div没有任何附加功能，给了什么属性就能变成什么样。
- div主要的作用是被用来布局网页
span标签:
- span是行级标签
- span 没有任何附加功能，给了什么属性就能变成什么样。
- span标签被用来选中文档中的文字。

代码示例如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 纯净标签divspan--><div> <h3></h3><span>这是一个span</span></div></body>
</html>