inline
含义为”内联”，顾名思义，与内部的元素联动，由内部的元素决定大小与行为
代表元素： <span>, <a>, <strong>, <em>
| 特性 | 行为 | 解释 |
|---|---|---|
| 宽度 | 仅由内容决定 ( only as large as their content) | 无论父容器多宽，它只占用包裹内容所需的宽度。 |
| 换行 | 不会强制换行 | 多个内联元素会并排显示。 |
| 垂直间距 | 不生效 (don’t respect it) | margin-top 和 margin-bottom 无效，不会推动上下的元素。padding-top 和 padding-bottom 会生效但不会影响周围元素的布局。 |
block
块级元素，大小由父元素决定
代表元素： <div>, <p>, <h1> ~ <h6>, <ul>, <section>
| 特性 | 行为 | 解释 |
|---|---|---|
| 宽度 | 默认占满整个可用宽度 (fills the available inline space) | 除非手动设置 width，否则它会拉伸到和父容器一样宽。 |
| 换行 | 始终强制换行 | 无论旁边是否有空间，它都会独占一行。 |
| 垂直间距 | 完全生效 | margin-top 和 margin-bottom 会推开上下的元素。 |
inline-block
内联块级元素，结合了inline的大小由内部决定，block的margin垂直间距生效的特点
| 特性 | 行为 | 解释 |
|---|---|---|
| 宽度 | 仅由内容决定 (only as large as their content) | 像内联元素一样，宽度只够包裹内容。 |
| 换行 | 不会强制换行 | 像内联元素一样，可以并排显示。 |
| 垂直间距 | 完全生效 (other elements respect the block margin) | 像块级元素一样，margin-top 和 margin-bottom 会推动上下的元素。 |