行内元素、块级元素和行内块元素

HTML 可以将元素分类方式分为行内元素、块级元素和行内块元素.

使用display属性能够将三者任意转换:

display:inline;// 转换为行内元素
display:block;// 转换为块级元素
display:inline-block// 转换为行内块元素

行内元素

行内元素:（a，span，i，em，strong，b，label）

行内元素最常使用的就是 span，其他的只在特定功能下使用.

行内元素特征:

• 设置宽高无效
• 对 margin 仅设置左右方向有效，上下无效，padding 设置上下左右都有效
• 不会自动进行换行

---

块级元素

块级元素：（h1~h6，div，ul，li，ol，dl，dt，dd，form）

块级元素代表性的就是 div，其他入p、nav、header、footer 等等都可以用 div 来实现，不过为了方便解读代码，一般会使用特定的语义化标签，使代码可读性强.

块级元素特征:

• 能够识别宽高
• margin 和 padding 的上下左右均对其有效
• 可以自动换行
• 多个块级元素标签写在一起，默认排序方式为从上至下

---

块级元素和行内元素的分类

从 HTML 的角度来讲，标签分为：

• 文本级标签：p、span、a、b、i、u、em
• 容器级标签：div、h系列、li、dt、dd

行内元素：除了p之外，所有的文本级标签，都是行内元素，p是个文本级，但是是个块级元素

块级元素：所有的容器级标签都是块级元素，还有p标签

---

行内块元素

行内块元素综合了行内元素和块状元素的特性，因此行内块元素在日常的使用中，由于其特性，使用的次数也比较多.

行内块元素特性:

• 不自动换行
• 能够识别宽高
• 默认排序方式为从左到右

---