img标签相关知识点

1. alt和title
   alt：图片在无法正确显示的时候起到文本替代的作用
   title：鼠标滑过时显示的文字提示。当然不必要所有的img标签都加此属性，比方说logo这样比较重要或者说用户会体验到的图片内容建议一定要加此属性。
2. align
   top：文本顶部与图像顶部对齐
   middle：文本底部与图像底部对齐
   bottom：文本底部与图像底部对齐
   left：图像居左
   right：图像居右
3. 图像与图像之间的间距
   inline元素和inline-block元素之间存在空格或换行，元素中间会产生间隙，这里但说图像。
   消除间隙方法：
   （1）把图像放在同一行，且中间无间隙
   （2）为图像添加属性：align=“left”
   （3）设置图像CSS：float：left
   （4）为外围div添加：div{font-size:0;}
4. 图像与行内元素之间的间距
   消除间隙方法：
   （1）把图像放在同一行，且中间无间隙
   （2）为图像添加属性：align=“left”
   （3）设置图像CSS：float：left
5. 图像与块级元素之间的间距
   消除间隙方法：
   （1）为图像添加属性：align=“top” 或 align=“center”
   （2）设置图像CSS：display: block 或 vertical-align: top; 或 vertical-align: bottom;
6. 图像后跟span标签，文字和图片无法底部对齐

	<img src="~assets/img/cardWelfare/细节描述@2x.png" align="bottom">
    <span>哈哈哈哈哈哈</span>

效果如下：

此时需要去掉span标签，在外围加个div，里面设置文本样式

<div>
 	<img src="~assets/img/cardWelfare/细节描述@2x.png" align="bottom">哈哈哈哈哈
</div>

效果如下：