CSS 中的 margin-top 百分比计算

当对元素应用 margin-top 百分比时，必须了解计算方式执行。与普遍的看法相反，边距顶部百分比是根据包含块的宽度而不是其高度来确定的。

W3C 规范解释：

根据W3C 规范，“百分比是根据生成的框包含块的宽度计算的。”此规则适用于“margin-top”和“margin-bottom”。

将垂直边距基于容器宽度的原因：

1. 水平和垂直一致性： 块的所有四个边的百分比边距应保持相等，如“边距”简写属性所定义。基于容器宽度的垂直边距可保持一致的边距大小。
2. 避免循环依赖： 计算块高度通常依赖于了解顶部和底部边距。然而，如果这些边距取决于块高度，则在布局计算期间会出现循环依赖性。基于容器宽度的垂直边距可以解决此问题。

示例：

考虑以下代码：

.container {
  width: 500px;
  height: 100px;
}

p {
  margin-top: 50%;
}

'p' 元素的 'margin-top' 50% 将根据 '.container' 的宽度（即 500px）计算。因此，实际应用的 margin-top 将为 250px（500px 的 50%）。这与通常的假设不同，即它是 100px（200px 的 50%，'.container' 的高度）。

结论：

通过了解边距如何- 计算顶部百分比，可以有效控制元素定位并避免意外的布局问题。请记住，垂直边距基于包含块的宽度，以保持大小一致并防止 CSS 布局中的循环依赖。