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

相关概念：
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：

图2：css中的线

图3：确定行框高

替换元素
替换元素的边距和边框会影响该元素的行内框，继而影响行框的高度。
其内容不受CSS视觉格式化模型控制的元素,比如 img 、 input 、 textarea 、 select 、 object ，标签起到占位符的作用，实际内容不在文档中，叫做替换元素。浏览器会根据元素的标签类型和属性来显示这些元素。比如,img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。
CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object,video,textarea,input也是替换元素,audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。

非替换元素

替换元素之外的所有其他元素都是非替换元素,实际内容在文档流中，由CSS的视觉格式化模型负责非替换元素的渲染。
非替换元素的边距和边框不会影响行元素行内框的高度。

vertical-align：垂直对齐，只适用于行内元素、替换元素和表单元格，不能被继承。
默认值为baseline，将行内元素的基线和所在行的基线对齐；文本都是按基线对齐的。如果一个垂直对齐元素没有基线，比如图像、表单输入元素或其他替换元素，则把该元素的底端与其父元素的基线对齐。

There is space below that line for the descenders you find onletters 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的确定有特殊规定。Thebaseline of an inline-block is the baseline of its last line box in thenormal flow, unless it has either no in-flow line boxes or if its overflow property has a computed value other than visible , in which case the baselineis the bottom margin edge.所以会出现如下图显示的布局，可以通过改变vertical-align:top;修复。

以上就是css中的线及vertical-align实例详解的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。