首页 > 代码库 > inline视觉格式化

inline视觉格式化

基本术语和概念

匿名文本

所有未包含在行内元素中的字符串。空格也是匿名文本的一部分,因为空格和其他字符一样是正常字符。

em框

在字体中定义,font-size的值确定了各个em框的高度。也称字符框。

内容区

在非替换元素中,内容区可以是元素中各字符的em框串在一起构成的框。

在替换元素中,内容区就是元素的固有高度加上可能有的外边距,边框,和内边距。

行间距

font-size和line-height值之差。行间距只应用于非替换元素。

行内框

对于非替换元素,行内框刚好等于line-height的值。

对于替换元素,元素的行内框刚好等于内容区的高度。因为行间距不应用到替换元素。

行框

包含该行中出现的行内框的最高点和最低点的最小框。

 

根据术语和定义

内容区类似于块级元素的内容框。

行内元素的背景应用于内容区及所有内边距。不会应用到行间距。但会被内边距覆盖。

行内元素的边框要包围内容区及所有的内边距和边框。

非替换元素的边框,内边距和外边距对行内元素及生成的框没有垂直效果。即不会影响行内框的高度。

替换元素的外边距和边框确实会影响该元素的行内框的高度,相应的也可能会影响包含该元素的行框的高度。

行内框在行中根据vertical-align的值垂直对齐。

line-height的值只对块级元素内的行内内容和行内元素起作用,如果内容为空,则不起作用。

块级元素中包含的各文本行本身都是行内元素,而无论是否真正的用行内元素标记包围起来。

 

 

行内替换元素

line-height的值对于替换元素的行内框没有任何影响,但是替换元素还是有一个line-height的值,替换元素需要这个值,从而在垂直对齐时能正确的定位元素。因为vertical-algin的值是相对于line-height

的值计算的。对于垂直对齐来说,替换元素本身高度无关紧要,关键是line-height的值。

替换元素的外边距,内边距和边框会增加或减少行内框的高度。

正的会增加行内框高度,负的会将替换元素挤入其他行(margin-top为负上一行被往下拉,margin-bottom为负,替换元素会被下拉),。

默认的替换元素没有基线,他的行内框的底端与基线对齐,实际上是下外边距边界在基线上。

行内块状元素与替换元素一样,底端放在基线上。

 

inline视觉格式化