Html 如何确定块和内联元素的内容框高度

我想“什么决定了内容框的高度”和行的高度。 对于具有线高度的块元素，似乎可以确定它

线条高度是否与div标签的高度相同？
线条高度和跨度标记的高度相同吗？

对于块元素，这很容易，但需要区分两种不同的情况。当我们有IFC（内联格式上下文）或BFC（块格式上下文）时。从中你可以阅读

如果“高度”为“自动”，则高度取决于元素是否具有任何块级子元素，以及元素是否具有填充或边框：

元素的高度是从其顶部内容到以下第一个适用项的距离：

最后一行框的底边，如果该框用一行或多行建立inline格式化上下文

如果子元素的底部边距未与元素的底部边距一起塌陷，则其最后一个流入子元素的底部（可能已塌陷）边距的底部边缘

流中最后一个子元素的下边框边缘，其上边距不会与元素的下边距一起塌陷

否则是零

仅考虑正常流中的子项（即忽略浮动框和绝对定位框，并考虑相对定位框，不考虑其偏移）

如果我们考虑一个IFC，那么行框将像你的例子一样定义我们的高度，在<代码> div 和<代码> p>代码>中，你有一个由行高定义的行框。

如果我们考虑BFC，则应用（2）和（3）。在这里，您可以将其视为一个递归定义，因为有一个BFC意味着内部有其他块，这些块将遵循相同的规则（BFC或IFC等）。此外，我们考虑了边缘折叠规则以获得最终高度。 如果块为空，则为零

当然，这是考虑代码<>高度：自动< /代码>的情况。如果你明确地设置了一个高度，那么它是微不足道的

---

对于内联元素，您可以参考以下部分：

“高度”属性不适用。内容区域的高度应基于字体，，但本规范未规定如何设置。例如，UA可以使用em框或字体的最大升序和降序。（后者将确保em框上方或下方部分的图示符仍在内容区域内，但会导致不同字体的大小不同的框；前者将确保作者可以控制相对于“线高度”的背景样式，但会导致在其内容区域外绘制图示符。）

这里有点棘手，但规则很简单：您无法控制或设置内容区域的高度。只有您将使用的字体属性将定义最终高度

还应注意，内容区域与行框不同

内联、未替换框的垂直填充、边框和边距从内容区域的顶部和底部开始，与“行高”无关。但在计算线框高度时，仅使用“线高度”

线条高度是否与跨度标记的高度相同？


线条高度是否与跨度标记的高度相同？


线条高度是否与span标记的高度相同？

感谢我对CSS Temani这一部分的介绍。现在开始有意义了。