line-height和vertical-align 属性的对比解析n

一  明确几个基本概念：

1  内容区：由width和height决定大小；

2  行内框：是指行内元素的边框，可以理解为和内容区大小相等。

3  行框 ：行框的高度等于本行中所有行内元素中行内框的最大的值，其中设置line-height属性可以改变行框

二  line-height:

定义：设置   块级元素   行间间隔，行高。

属性  ：normal 浏览器自动设置合理的行高，该属性在浏览器中默认是1-1.2，行高可以继承，但是1-1.2的行高倍数会导致阅读不畅； length : 设置固定的行高  px em ，由于行高的继承性，此种方法设置行高最为不理想，因为很可能出现子元素字体如果设置大了，字体会出现覆盖现象;  number :设置数字值，行高等于字体大小与该数字值的乘积 ，数值的继承性则是先继承数字，然后在求出； %  设置百分比，百分比继承的时候，会继承父元素求出来的line-height值，以px,为单位继承下去。

line-height,line-boxes,inline-boxes,height之间的关系：height 和 line-height都可以设置元素的高度，如果没有设置元素的高度，此时，元素的的高度由line-height撑开；line-boxes会取所有inline-boxes的最大值，然后给到他的老大height高度。

对于块级元素，其高度是由line-height撑开的，而并不是文字内容。详情参http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/

对于行内元素，其高度只能由内容撑开。

三  vertical-align

定义：该属性定义   行内元素   的基线相对于其所在行的基线垂直对齐。可以设置数值和百分数，长度值为负的时候代表，相对于基线向下移动，设置百分数的时候，

属性：top  使元素的顶部对齐其所在父元素的line-box顶端 

bottom 使元素的底部对齐其所在父元素的line-box的底部

text-top 使元素的顶端对齐父元素内容区顶部。

text-bottom 使元素的底部对齐父元素内容区底部。