元素 1 的 CSS 顶部为 x%，高度为 y%。元素 2 的 CSS 顶部为 (x+y)%。为啥像素值不同？

Posted 2023-05-08

【中文标题】元素 1 的 CSS 顶部为 x%，高度为 y%。元素 2 的 CSS 顶部为 (x+y)%。为啥像素值不同？

【英文标题】：Element 1 has a CSS top of x% and height of y%. Element 2 has a CSS top of (x+y)%. Why do the pixel values differ?元素 1 的 CSS 顶部为 x%，高度为 y%。元素 2 的 CSS 顶部为 (x+y)%。为什么像素值不同？

【发布时间】：2021-08-03 19:23:16

【问题描述】：

我有一个尺寸问题。

我正在努力实现的目标的总结

我正在使用可调整大小和可拖动的功能以及一些 JS 代码来设置屏幕上元素的顶部、左侧、高度和宽度。我希望能够调整一个元素的大小，直到它与另一个元素发生冲突。如果要调整大小的元素与另一个元素发生碰撞，则它应该是齐平的，即元素之间应该没有间隙地接触。

我看到的尺寸问题

当我调整一个元素的大小时，它会在与另一个元素发生碰撞时停止调整大小。一切看起来都很好，但有时元素之间会出现一个小间隙（通常小于一个像素大）。 当我计算第一个元素的顶部 + 高度时，为了得到它的底部，它似乎与第二个元素的顶部匹配，如预期的那样，例如如果元素 1 的顶部 = 10%，元素 1 的高度 = 10%，则元素 2 的顶部等于 20%。完美！

然后我计算像素值并看到以下内容：

Element1.offset().top + Element1.height() != Element2.offset().top

屏幕截图问题示例

我想知道为什么百分比与相应的像素值不匹配。我在下面提供了一个示例，并附有图片，以说明我的问题。

元素 1（元素上方）：

Top + Height = Bottom

13.64% + 13.68% = 27.32%

Element 1 and its percentage top and height

元素 2（元素下方）：

Top = 27.32%

Element 2 and its percentage top and height

如上所示，元素 1 的顶部加上高度等于元素 2 的顶部。但是看看当我以像素为单位计算相同的值时会发生什么：

Element1.offset().top + Element1.height() = 175.5875015258789px

Element2.offset().top = 175.60000610351562px

Pixel values of top + height of Element1 vs top of Element2

如果百分比值相同，为什么 Element1.offset().top + Element1.height() 不等于 Element2.offset().top？

Here's a link to the JSFiddel demo of the software

【问题讨论】：

在一个你有 27.23 的地方和另一个 27.32

考虑发布一个最低可重现的演示。

这是由于使用相对单位时的舍入误差。如果您需要像素精度，请不要使用 %。

@vals 感谢您指出这一点。我已经改正了

我建议改用FlexBox。

【参考方案1】：

删除问题所在的边框。 css

* border-style: none;