visual formatting model details简译 <四> 之文本行的高度

最新推荐文章于 2024-09-17 22:59:44 发布

shuimuniao

最新推荐文章于 2024-09-17 22:59:44 发布

阅读量623

点赞数

分类专栏：浏览器文章标签： border 浏览器 css apache 文档

浏览器专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文本行高度取决于本行中的inline box。为了计算文本行的高度，需要先计算每一个line box的高度。

按照下面的方法计算line box的高度。

1）如果结点是replaced类型，inline-block类型，inline-table类型，那么linebox的高度是margin区域的高度。（注此高度与结点的高度有些不同）假设网页源码如下，

<html>
<head>
<style>
#container{
    background-color:blue;
}
img{
margin:10px;
}
</style>
</head>
<body>
<div id="container">
<img src="apache_pb.png" />
</div>
</body>
</html>

网页的效果如下图所示，

可以看出图片外围绘制了蓝色。Container的高度完全由孩子决定。如果图片的高度没有考虑margin，那么在图片的上下区域肯定不会出现蓝色。
2）如果结点是non-replaced inline类型，那么结点所在行的高度由line-height属性决定。
获得本行所有inline box的高度后，就要利用这些box的高度来确定文本行的高度。为了使文本行容纳所有inline box的高度，必须将文本行的高度设置的做够大。假如没有对齐规则，那么文本行的高度也将无法确定。因此，为了给文本行一个固定的高度，且尽量减小文本行的高度，需要按照一定的规则来对齐结点。CSS2.1标准使用”vertical-align”属性来设置对齐规则。
按照一定的对齐规则，设置所有line box之后，就可以计算文本行的高度了。文本行的高度就是“顶部line box的上边界与底部line box的下边界的距离”。
CSS假设任何一个字都有一个baseline(基准线)，文字在baseline(基准线)之上的高度是确定的，文字在baseline之下的高度也是确定的。在本节中，A用来表示baseline之上的高度，D用来表示baseline之下的高度，A+D表示文字的高度。注意这里的A和D与字体的ascender、descender没有对应关系。
根据文字的baseline，浏览器可以将同一个line box中的文字对齐。注意，同一个line box中的文字可能是不同的字体。因此这些字体的A和D可能不相同。
在文字之上、文字之下会留出一些leading(空白)。用L表示空白的总高度。L的计算公式是’line-height’ - (A+D)。一般情况下，文字之上的空白高度是L/2，文字之下空白高度是L/2。注意，L可能为负值。
虽然在计算inline non-replaced box高度的时候没有考虑box的padding, border, margin区域，但是这些区域不能被省略，在渲染、布局的过程中要考虑这些区域。这意味着：当line-height的值小于内容的真实高度时，padding区域、border区域的颜色可能出现在紧邻本节点的inline box内部。浏览器必须按照节点在文档中的顺序渲染这些节点的padding、border区域。这意味着：弟弟节点的padding、border可能会覆盖哥哥节点的box。