块元素、行内元素和行内块元素的区别以及转换

块元素（block）

1. 可以设置其宽度、高度，内外边距，独占一行
2. 默认宽度为100%
3. 不受空格影响
4. 可以容纳行内元素和其他块元素

常见的块元素：div，h1~h6，ul，li，p，table等

行内元素（inline-level）

1. 不支持宽高（宽高根据内容大小自动撑开），自左向右排列
2. 受空格影响
3. 默认宽度是自身内容的宽度
4. 不独占一行

常见的行内元素：span，i，a，b，strong，em，sub，sup等

行内块元素（inline-block）

1. 支持宽高，自左向右排列
2. 受空格影响
3. 不独占一行
4. 具备块元素和行内元素的所有特点

标签之间的转换

display：

• none（隐藏，不显示）
• block（转化为块元素）
• inline（转化为行内元素）
• inline-block（转化为行内块元素）

注意：当元素浮动（float）后，不再区分行内和块元素，并且具备两者所有特点