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