关于行盒的参考线, 有什么了解?
制作字体时, 会有几根参考线, 从上到下分别是: 顶线, 上基线, 基线, 下基线, 底线. 不同的字体, 基线不同; 同一种字体的不同文字, 基线相同.
字体的font-size, 设置的是字体的相对大小. 字体的实际大小, 其实是顶线到底线的距离(content-area). 行盒的背景background, 覆盖content-area.
顶线向上延伸的空间和底线向下延伸的空间, 叫做gap(空隙), 它由字体设计者决定. content-area加上上下两个gap空间, 叫做virtual-area(虚拟区). 行高line-height, 就是虚拟区高度.
line-height: normal, 指的是使用默认的gap.
"文字一定出现在一行的最中间", 这种说法是错误的; 应该说content-area一定在virtual-area的中间
一个元素, 如果它的子元素有行盒, 那么该元素内部也会产生参考线.
多个行盒组合起来, 可以形成多行, 每一行的区域叫做line-box, line-box的顶边是该行内所有行盒的最高顶边, 底边是该行所有行盒的最低底边. 所以, 一个元素在高度自动时计算实际高度, 通过line-box计算
line-height的取值:
- 数值, 相对基线的偏移量, 向上为正, 向下为负
- 百分比, 相对基线的偏移量, 百分比是相对于自身virtual-area的高度
line-box是承载文字内容的必要条件, 以下情况不生成行框line-box
- 某元素内部没有任何行盒inline-box
- 某元素的字体大小为0
可替换元素和行块盒的基线位置
- 图片: 基线位置在图片的下外边距
- 表单元素: 基线位置在内容的底边
- 行块盒:
- 行块盒内部的子元素, 如果最后一行有line-box, 用最后一行的基线作为整个行块盒的基线
- 如果行块盒内部没有行盒, 则使用该行块盒的下外边距作为基线
所以, 元素内有图片, 可以观察到图片底部有白边现象. 白边产生的原因就是容器元素内由于有行盒(图片), 产生了line-box, 容器内的元素与line-box的基线对齐, 即图片的下外边距对准了line-box的基线. 消除图片底部的白边, 只要让容器不生成line-box即可, 即将图片变为display: block, 或者容器的font-size设置为0.
