css中的线及vertical-align实例详解-html教程

相关概念：
leading（行间距）：指填充在两行文字间的铅条，等于line-height 和 font-size之差，其中一半leading加到文字上方，另一半leading加到文字下方，只用于非替换元素。

em框：em框指示没有行间距时基线之间的距离，不指定字符间的边界，实际的字形可能比其em框更高或更矮。

font-size ：确定给定字体的em框（em box）的高度，但不能保证实际显示的字符就是这种大小。font-size属性和实际字体大小的具体对应关系由字体的设计者确定。

基线：the line upon which most letters "sit" and below which descenders extend，并不是汉字的下端沿，而是英文字母"x"的下端沿。

内容区（content area）：非替换元素即em框串在一起组成的框，间接由font-size确定；替换元素：即元素固有的高度加可能的边距和框。

行内框（inline box）：虚拟的矩形框，无法显示，大小为内容区加leading。对非替换元素，等于line-height值；对替换元素，等于内容区的高度。同一行内的若干元素可以有不同的行高和行内框高。

行框（line box）：包含该行内所有行内框的最高点和最低点的最小框，行框的高度只同本行内元素的行高有关，而和line-height无直接关系，和父元素的高度（height）也无关。行内框在行中根据其vertical-align属性值垂直对齐。

匿名文本：指所有未包含在行内元素中的字符串。

line-height：指文本行基线之间的距离，确定了各个元素框增加或减少多少，默认为元素本身字体大小的1.2倍。

line-height值从父元素继承时，要继承在父元素上计算的值，而不是在子元素上计算的值（em等）。如果是缩放因子（没有单位的纯数字值），则继承的是缩放因子，不是计算的值，最终会计算缩放因子和子元素的font-size的乘积。

图1：

　　There is space below that line for the descenders you find on letters like f, j, p and q.修复方法：通过设置图片的vertical-align的属性值或改变dislay:block；或者修改父元素的font-size/line-height使行内框的高度小于图片。在父元素的font-size:0;的极端情况下，中线和基线会重合。
　　bottom：将元素行内框的底端和行框的底端对齐。
　　middle：把行内元素框的中线与基线上方0.25em处的一个点对其，也等于与基线的距离为小写字母x高度的一半（即0.5ex）。x字符的中点并不是内容区的绝对中线，因为x字符会有所下沉。
　　百分数：相对于元素的line-height计算。行内可替换元素的line-height的作用就是帮助计算vertical-align。
　　具体长度的值：把一个元素相对于父元素基线升高或降低指定的距离。垂直对其的文本并不会覆盖其他行的文本，只会影响当前行的行高，以使足以包含最高行内框的顶端和最低行内框的底端。

行内块：inline-block，行内块元素会作为替换元素放在行中，即行内块的底端默认放在文本行的基线上。ie6/ie7要使用{display:inline; zoom:1;...}才生效。通常用于横向菜单列表或不等高列表元素整齐排列。但是li标签之间的空格会当作inline元素在页面显示4px的空白，可以通过父元素font-size:0,子元素font-size:12px;消除空白。对于ie6/ie7/safari需要使用word-spacing和letter-spacing加以调整。

行内块默认是baseline对齐，但是baseline的确定有特殊规定。The baseline of an &＃39;inline-block&＃39; is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its &＃39;overflow&＃39; property has a computed value other than &＃39;visible&＃39;, in which case the baseline is the bottom margin edge.所以会出现如下图显示的布局，可以通过改变vertical-align:top;修复。

以上就是css中的线及vertical-align实例详解的详细内容，更多请关注 第一PHP社区 其它相关文章！