vertical-align属性应用

vertical-align属性常用于设置行内块元素比如图片或者表单和文字之间垂直对齐方式。

设置vertical-align属性只针对于行内元素和行内块元素有效，用于设置一个元素的垂直对齐方式

vertical-align属性值

baseline：默认，元素放置在父元素的基线上。

top：元素的顶部(包含该元素的外边距margin-top padding-top)与父元素中最高元素的顶部对齐

middle：元素放置在父元素的中部

bottom：元素的底部与父元素中最低元素的底部对齐

图片与文字默认基线对齐

图片底部会有默认的空白缝隙，原因是行内块元素默认和文字基线对齐。

解决方案：

1.给图片添加vertical-align属性，将属性值设置为middle，top，bottom都可以（建议使用）

2.将图片转换为块级元素，因为块级元素没有基线对齐的问题。

单行文本溢出省略号显示必须满足三个条件

1.先强制一行内显示文本
white-space: nowrap;(默认normal自动换行)
2.超出部分隐藏
overflow: hidden;
3.文字用省略号
text-overflow: ellipsis;

多行文本溢出省略号显示有兼容性问题，适合于webkit内核的浏览器或者移动端（移动端大部分是webkit内核）