javascript - 为什么 getComputedStyle 不考虑 margin 崩溃？

Question

关于浏览器内的 Javascript，window.getComputedStyle() 方法应该给出应用于元素的 CSS 属性的最终使用值。根据MDN documentation ，这意味着“在执行所有计算之后”。

但是，“所有计算”似乎不包括 margin 崩溃。在 Firefox 和 Chrome 中(至少)，指令 getComputedStyle().marginBottom 返回在计算任何边距折叠之前的计算值。

例如，考虑以下元素:

<div style="margin: 10px 0 15px 0"></div>

它的顶部和底部边距将被折叠，因为(大致)它的内容高度为零(参见 the W3C CSS2 Recommendation )。 CSSOM 方法将返回这些值:

getComputedStyle().marginTop → 10px
getComputedStyle().marginBottom → 15px
getBoundingClientRect().top → {top of margin box} + marginTop
getBoundingClientRect().bottom → idem top

但是，由于边距折叠，布局显示边界客户矩形之前 10px 的边距，以及之后 5px 的边距，即 max(0, marginBottom - marginTop)。

为什么getComputedStyle().marginBottom不直接返回5px，即“所有计算完成后”的实际使用值，而不是指定的15px？这是 W3C 推荐的行为吗？ (我在 w3.org 文档中没有看到任何关于此的信息。)

这是错误还是功能？

Answer 1

计算 和使用 值之间存在区别。此外，getComputedStyle() 返回resolved 值，“这可能是计算值或使用值”。 MDN reference .

至于很多计算状态的实用值(value)，我不知道。