CSSS 基线

·  阅读 38

字体

image.png 文字的实际大小(content-area,内容区):文字顶线到底线的距离
所以行盒的背景大小,就是覆盖content-area。

line-height

image.png

  • 行距= 行间距 + 字体大小
  • 行距:相邻文本行间上一个文本行基线和下一文本行基线间的距离。
  • 行间距: 指相邻文本行间上一个文本行下行线(ascent)和下一文本行上行线(descent)间的距离。

在 CSS 中,CSS 属性 line-height 则是用于设置真实的行距。从 W3C Rec 中看出, CSS 中行高即是行距。

vertical-align

默认对齐方式为 baseline,允许指定负长度值和百分比值,均是相对于父级 baseline 而言。

一个元素如果子元素出现行盒(inline、inline-block),该元素内部也会产生参考线

  • baseline:该元素的基线与父元素的基线对齐
  • super: 该元素的基线与父元素的上基线对齐
  • sub:该元素的基线与父元素的下基线对齐
  • text-top: 该元素的virtual-area的顶边,对齐父元素的text-top
  • text-bottom: 该元素的virtual-area的底边,对齐父元素的text-bottom
  • top:该元素的virtual-area的定边,对齐line-box的顶边
  • bottom:该元素的virtual-area的底边,对齐line-box的底边
  • middle: 该元素的中线(content-area的一半),与父元素的X字母高度一半的位置对齐
  • 百分比:正值基于父元素的baseline向下偏移对齐
  • 高度(允许负值):正值基于父元素的baseline向上偏移对齐,负值基于父元素的baseline向下偏移对齐

行盒组合起来,可以形成多行,每一行的区域叫做line-box,line-box的顶边是该行内所有行盒最高顶边,底边是该行行盒的最低底边。

实际,一个元素的实际占用高度(高度自动),高度的计算通过line-box计算。

  • 行盒:inline-box
  • 行框:line-box
  • 数值:相对于基线的偏移量,向上为正数,向下为负数。
  • 百分比:相对于基线的偏移量,百分比是相对于自身virtual-area的高度

line-box是承载文字内容的必要条件,以下情况不生成行框:

  • 某元素内部没有任何行盒(空元素)
  • 某元素字体大小为0

可替换元素和行块盒的基线

  • 图片:基线位置位于图片的下外边距
  • 表单元素:基线位置在内容底边。
  • 行块盒:行块盒最后一行有line-box,用最后一行的基线作为整个行块盒的基线。如果行块盒内部没有行盒,则使用下外边距作为基线。

版权声明:本文为CSDN博主「飞羽逐星」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:blog.csdn.net/xun__xing/a…

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改