Position 绝对增加元素的高度

Question

我正在尝试找出一种方法来计算印刷动画在任何给定字体大小下的字体基线，并注意到一些非常奇怪的事情：出于某种原因，当元素的 position 更改为绝对值时，元素的高度值以看似任意的方式增加.

没有 Position 绝对值的高度（单击控制台日志高度）

 const small = document.querySelector('#small'), large = document.querySelector('#large') window.onclick = () => { console.log(small.getBoundingClientRect().height, large.getBoundingClientRect().height) }

 div { border: solid purple 2px; } #small { border: solid red 2px; } #large { border: solid black 2px; font-size: 10rem; }

 <div> <span id='small'>.</span> <span id='large'>.</span> </div>

高度为 Position 绝对值（单击控制台日志高度）

 const small = document.querySelector('#small'), large = document.querySelector('#large') window.onclick = () => { console.log(small.getBoundingClientRect().height, large.getBoundingClientRect().height) }

 div { border: solid purple 2px; } #small { border: solid red 2px; } #large { border: solid black 2px; font-size: 10rem; } span { position: absolute; }

 <div> <span id='small'>.</span> <span id='large'>.</span> </div>

有人可以解释一下吗？

Answer 1

诀窍在于显示，你不会发现你得到的高度之间有任何逻辑关系，因为在这两种情况下计算是不同的。

在第一种情况下，您有内联元素并且适用此规则：

“高度”属性不适用。 内容区域的高度应基于字体，但本规范未指定如何。 UA 可以，例如，使用em-box 或字体的最大ascender 和descender。 （后者将确保部分位于 em-box 上方或下方的字形仍然落在内容区域内，但会导致不同 fonts 的不同大小的框；前者将确保作者可以控制相对于“行高”的背景样式，但会导致在其内容区域之外绘制字形。）

行内非替换框的垂直填充、边框和边距从内容区域的顶部和底部开始，与“行高”无关。 但是在计算行框的高度时只使用'line-height'。 ^参考

因此，跨度的高度仅取决于字体属性（字体系列、字体大小等）+ 边框顶部/底部。 除非你深入研究字体属性，否则你无法找到准确计算高度的方法，这是一项困难的练习，尤其是当我们处理不同浏览器（以及不同操作系统）的默认字体时。

有关的：

特定文本字符可以更改行高吗？

是什么决定了字母所在元素的最高和最低字母与顶部和底部边框之间的空间？

---

在第二种情况下，你的 span 现在是一个块元素，因为你把它变成了position:absolute所以你需要遵循这里详述的规则： https://www.w3.org/TR/CSS21/visudet.html#abs-non -replaced-height将引导我们使用以下规则： https://www.w3.org/TR/CSS21/visudet.html#root-height

如果它只有内联级子级，则高度是最顶层线盒顶部和最底端线盒底部之间的距离

所以我们元素的高度现在是由line-height定义的行框的高度（详见此处： https://www.w3.org/TR/CSS21/visudet.html#line-height ）。 不仅行高而且内部元素的垂直 alignment 但在你的情况下你没有这种复杂性因为你只有一个字符

默认line-height由浏览器定义，但如果你修复它，你将获得你想要的高度：

 const small = document.querySelector('#small'), large = document.querySelector('#large') window.onclick = () => { console.log(small.getBoundingClientRect().height, large.getBoundingClientRect().height) }

 div { border: solid purple 2px; } #small { border: solid red 2px; line-height:1; /* will give a height = 1*16 + 4 */ } #large { border: solid black 2px; font-size: 10rem; line-height:1; /* will give a height = 1*10*16 + 4 */ } span { position: absolute; }

 <div> <span id='small'>.</span> <span id='large'>.</span> </div>

相关：如何根据字体大小计算高度？

---

如果您将span元素设为inline-block ，您将获得与第二种情况相同的行为，因为您遵循此处的规则： https://www.w3.org/TR/CSS21/visudet.html#block-root-margin这将使我们对绝对元素（ https://www.w3.org/TR/CSS21/visudet.html#root-height ）采用相同的规则，这意味着line-height将控制您的身高：

 const small = document.querySelector('#small'), large = document.querySelector('#large') window.onclick = () => { console.log(small.getBoundingClientRect().height, large.getBoundingClientRect().height) }

 div { border: solid purple 2px; } #small { border: solid red 2px; display:inline-block; line-height:1; } #large { border: solid black 2px; font-size: 10rem; display:inline-block; line-height:1; }

 <div> <span id='small'>.</span> <span id='large'>.</span> </div>