display: block; 和 display: inline; 的区别

dispaly: block 形成一个块框，元素特点：

1. 处于常规流中时，如果width没有设置，会自动填充满父容器

2. 可以应用margin/padding

3. 在没有设置高度的情况下会扩展高度以包含常规流中的子元素

4. 处于常规流中时布局时在前后元素位置之间（独占一个水平空间）

5. 忽略vertical-align

display: inline 形成一个行内框，元素特点：

1. 水平方向上根据direction依次布局

2. 不会在元素前后进行换行

3. 受white-space控制

4. margin/padding在竖直方向上无效，水平方向上有效

5. width/height属性对非替换行内元素无效，宽度由元素内容决定

6. 非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定

7. 浮动或绝对定位时会转换为block

8. vertical-align属性生效（经测试，貌似有问题，待处理）

关于图片位置的一个小例子

<style>
	img.top { vertical-align: text-top; }
	img.bottom { vertical-align: text-bottom; }
	img.middle { vertical-align: middle; }
</style>


<div>An <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a default alignment.</div>

<div>An <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div>

<div>An <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-bottom alignment.</div>

<div>An <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div>

An image with a default alignment.

An image with a text-top alignment.

An image with a text-bottom alignment.

An image with a middle alignment.