一 明确几个基本概念:
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 使元素的底部对齐父元素内容区底部。