HTML 中的块级元素、行内元素、行内块级元素

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种，一般使用 display，进行三者的转换。

1. display: inline; 将元素转换为行内元素；
2. display: block; 将元素转换为块级元素；
3. display: inline-block; 将元素转换为行内块级元素。

行内元素（display: inline）

---

特点：
1. 和其他元素都在一行上；
2. 高，行高及外边距和内边距不可改变；
3. 宽度就是它的文字或图片的宽度，不可改变；
4. 内联元素只能容纳文本或者其他内联元素

常见行内元素：span、strong、em、s、u、a等

块级元素（display: block）

---

特点：
1. 总是在新行上开始；
2. 高度，行高以及外边距和内边距都可控制；
3. 宽度缺省是它的容器的100%，除非设定一个宽度；
4. 它可以容纳内联元素和其他块元素

常见的块级元素：
- h1~h6,hr
- div,dir(目录列表),dl(定义列表)
- table,ul.ol,li,form,fieldset(from控制组)
- p,pre
- address,blockquote,center
- menu(菜单列表)
- noframes(对于不支持frame的浏览器显示此区块内容)
- noscript(对于不支持script的浏览器显示此内容)

行内块级元素（display: inline-block）

---

特点：
1. 不自动换行
2. 能够识别宽高
3. 默认排列方式为从左到右

常见行内块级元素： input、img、button