参考线主要是起到对齐的作用
文字
首先文字是通过文字制作软件(例如:fontforge)制作出来的。
制作文字的时候,会有几根参考线,不同的文字类型,参考线的相对位置也不一样(不一定就是等分的)。同一种文字类型,参考线的相对位置是一致的。
从上到下,参考线分别是:
序号 | 英文 | 中文 | 说明 |
---|---|---|---|
1 | top | 无 | 与gap相关 |
2 | text top / ascent | 顶线 / 顶边 | 文字顶部 |
3 | super | 上基线 | 与对齐相关 |
4 | baseline | 基线 | 与对齐相关 |
5 | sub / ascent | 下基线 | 与对齐相关 |
6 | text bottom / descent | 底线 / 底边 | 文字底部 |
7 | bottom | 无 | 与gap相关 |
content-area(内容区):文字顶线到底线的距离,也就是文字实际的大小
行盒的背景: 是覆盖 content-area 的区域。
文字的相对大小:
文字的相对大小的常用取值:1000,2048,1024。
如上图,当字体的相对大小的高度尺寸是2048的时候,从顶线到底线的距离是2398(这个尺寸是文字制作软件中,顶线到基线的距离 加上 基线到底线的距离),或者 可以理解为,一个字体的高度是2048个像素,但是实际的占用区域的高度是2398个像素。在字体大小缩放的时候,就是按照这个比例进行缩放的。
注意:字体的宽度随字体不同,宽度都是不同的(例如有些字体的W和I的占用区域的宽度就不一样,但是有些字体的W和I的占用区域的宽度是一样的)。
font-size:设置的是文字相对大小
行高
首先要明白下列知识点:
line gap:顶线向上延伸的空间(顶线 到 top 的距离),和底线向下延伸的空间(底线 到 bottom 的距离),两个空间一定是相等的,该空间叫做 line gap,line gap 默认情况下是字体设计者决定的。有的可能是0,甚至有的是负数。
vartual-area(虚拟区域):top 到 bottom 之间的距离叫做vartual-area(虚拟区域)
行高:就是vartual-area(虚拟区域),就是间接设置line gap。
line-height: normal // 默认值,使用文字默认的gap
line-height: 1 // 注意,不要将值设为1,因为行与行之间可能会重叠
注意:文字不一定出现在一行的最中间,因为文字的对齐是和参考线有关。比如一个大号字体和一个小号字体在同一行,那么小一号的文字是不会和大一号的文字居中对齐的,因为文字是根据参考线而对齐的,而不是居中对齐的,下面有介绍文字的对齐方式。
vertical-align
决定参考线:font-size、font-family、line-height
只要一个元素如果子元素出现行盒,那么该元素内部也会产生参考线
<p>
M
</p>
上面代码中 p 元素也是有参考线的,因为文字一定处在行盒的里面,如果没设置行盒,则会自动增加一个行盒包裹文字。因为文字是根据参考线排列的,如果没有行盒,就没有参考线,那么文字无法排列了。所以文字一定在行盒里面,会包裹一个匿名行盒。
文字也有参考线,元素也有参考线,默认情况下是基线对齐(文字的基线和元素的基线对齐)的,比如 p元素的基线和M文字的基线对齐。
行盒是:inline-box
**line-box:**行盒组合起来,可以形成多行,每一行的区域叫做line-box,line-box的顶边是该行内所有行盒最高顶边,底边是该行行盒的最低底边
line-box 是承载文字内容的必要条件,以下情况不生成line-box
- 某元素内部没有任何行盒
- 某元素字体大小为0
vertical-align的值:
baseline:该元素的基线与父元素的基线对齐
super:该元素的基线与父元素的上基线对齐
sub:该元素的基线与父元素的下基线对齐
text-top:该元素的 top 与父元素的 text top 对齐(注意是增加 gap 的)
text-bottom:该元素的 bottom 与父元素的 text bottom 对齐(注意是增加 gap 的)
top:该元素的 top 与 line-box 的顶边对齐
bottom:该元素的 bottom 与 line-box 的底边对齐
middle:该元素的中线(content-area的一半)与父元素的X字母高度的一半对齐。
数值:相对于父元素基线的偏移量。向上为正数,向下为负数。
百分比:相对于自身的 virtual-area 的高度。
一个元素的实际占用高度(高度自动),高度的计算通过line-box计算。
可替换元素的参考线
图片:图片的基线位置位于图片的下外边距位置,所以图片会有白边
两种解决方法:font-size:0 或者 display: block
表单元素:表单元素的基线位置在内容的底边
行块盒
- 行块盒最后一行有line-box,用最后一行的基线作为行块盒的基线
- 如果行块盒内部最后一行没有行盒,则使用下外边距作为行块盒的基线
总结的比较乱,凑活看吧……