CSS vertical-align和line-height属性

http://www.cnblogs.com/dolphinX/p/3236686.html

基线：指字母“x”的下端沿。浏览器一整行的基线位置是相同的。元素的默认对齐方式就是基线对齐。

中线是一行的正中间

 

内容区：是指底线和顶线包裹的区域（可以用display:inline;back-ground-color:red;属性显示出来），宽度是某font-size下最大字的宽度，内容区的大小依据font-size的值进行变化；

 

行高(line-height)：包括内容区和内容区两边对称扩展的区域。也是相邻文本行基线之间的距离。浏览器的一整行的行高默认由这一行最高行高的元素决定。

行距：相邻文本行间上一个文本行底线和下一个文本行顶线之间的距离 

 

行内框：行内框是一个浏览器渲染模型中的概念，行内框的高度就是行高（line-height）指定的高度。

行框（line box）：行框是指本行的一个虚拟矩形框，也是浏览器渲染模式中的一个概念。行框高度是本行中所有行内框最高顶线和最低底线的差。（以某元素的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算出行框高度）。

所有浏览器都支持vertical-align属性，其中IE都不支持属性值“inherit”

基线对齐（baseline）:默认。是元素的基线同基准元素（取行高最高的作为基准）的基线对齐。

顶端对齐(top)：将元素的行内框的顶端与行框的顶端对齐。以顶线为基准线

文本顶端对齐(text-top):将元素行内框的顶端同文本行的顶线对齐。

低端对齐(bottom):将元素的行内框的低端与行框的低端对齐。以底线为基准线

文本低端对齐(text-bottom):将元素的行内框的底端与文本行的底线对齐。

中间对齐(middle):以该元素的中线作为其他行内框的基线。同时有多个的时候以行内框最高的为基准。中线的高度在x的中点。

百分比：是指相对于基线移动百分之该元素行内框高度的距离

长度值：相对于基线移动某些距离。

上标(super):使元素的基线相对于基准基线升高。

下标(sub):使元素的基线相对于基准基线降低。

JS语法：object.style.verticalAlign="bottom"