Web前端学习—基础篇(13)_基线、底线、中线、顶线、行高、行距分别指什么
前端学习——基础篇
四、CSS学习
4.4、CSS常用样式
4.4.2、理解CSS中的行高与基线
划分:粉色为顶线,蓝色为中线,绿色为基线,红色为底线
顶线:中文汉字的的上端沿;
中线:横过英文字母x的中间的线;
基线:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿;
底线:中文汉字的下端沿;
内容区:是指底线和顶线包裹的区域(行内元素display:inline可以通过background-color属性显示出来),实际中不一定看得到,但确实存在。内容区的大小依据font-size的值和字数进行变化。
行高(line-height):包括内容区与以内容区为基础对称拓展的空白区域。一般情况下,也可以认为是相邻文本行基线间的距离。
行距:指相邻文本行间上一个文本行基线和下一文本行顶线之间的距离。当然,也可以看作是(上文本行行高-内容区高度)/2+(下文本行行高-内容区高度)/2。
行内框:行内框是一个浏览器渲染模型中的一个概念,无法显示出来,但是它又确实存在,它的高度就是行高指定的高度。
行框(line box):同行内框类似的概念,行框是指本行的一个虚拟的矩形框,也是浏览器渲染模式中的一个概念。
行框高度等于本行内所有元素中行内框最大的值(以行高值最大的行内框为基准,其他行内框采用自己的对齐方式向基准对齐,最终计算行框的高度)。
用法:
设置元素内容的垂直对齐方式。
参数:
baseline: 基线对齐(默认值);
sub: 下标显示;
super: 上标显示;
top: 顶端对齐;
text-top: 文本的顶端对齐;
middle: 中部对齐;
bottom: 底端对齐;
text-bottom: 文本的底端对齐;
百分比和长度: CSS2,可为负数。
inherit: 不继承
注意:顶线和底线是相对于中线来计算的,当line-height为0时,顶线和底线将重合,而中线是相对于基线来计算的,基线始终在中线的下方(x的底部),vertical-algin:middle并不是对其到中线而是对齐到基线以上1/2x的位置。