CSS：显示模式

CSS：显示模式

1.块级元素（block）

例：<h1>-<h6>、<p>、<div>...

特点：

1. 独占一行
2. 高度、宽度、内外边距可以设置
3. 宽度默认是窗口的100%
4. 内部可以放行内或者块级元素

2.行内元素（inline）

例：<a>、<strong>、<b>、<em>、<i>、<span>...

特点：

1. 相邻元素在一行上
2. 高、宽不能直接设置
3. 默认宽度就是它本身内容的宽度
4. 只能容纳文本或者其他行内元素

3.行内块元素（inline-block）

例：<img/>、<input/>、<td>...

特点：

1. 相邻行内元素（行内块）在一行上，中间会有空白缝隙
2. 默认宽度就是它本身内容的宽度
3. 高度，行高，外边距以及内边距都可以设置

4.显示模式转换

/*块转行内*/
display: inline;

/*行内转块*/
display: block;

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