CSS 中的百分比:它们是如何在内部计算的

Question

即使经过多年的CSS-ing，我也无法找到任何解释（经过简单的观察后自己也无法理解）关于百分比如何计算像素。进一步解释：

为什么一个div 中 2% 的左边距最终为 20 像素，而在另一个div 中为 30 像素？宽度起作用吗？在这种情况下，这意味着更宽的div 具有更大的余量，但根据我的观察，情况并非如此！

检查这个：http://JSNAIL.IT/uLjeYSHx/. 具有类 col2 的div 比其他的要大，但它计算的边距右边距相同。（11像素）

Answer 1

边距的百分比取决于缩放所在的相对框。

因此，如果您在整个页面上取一个百分比，那么如果您将其放在宽度为 200px 的框中，它会更多。

在最后一种情况下，20% 最终将是 40px。

Answer 2

内部元素的百分比边距取决于外部容器的大小。 参见示例 对于两个示例，内部div 的左边距都设置为 20%

 _______________
|    ___        |
|20%|   |       |
|   |___|       |
|_______________|
 _______________________
|      ___              |
|20%  |   |             |
|     |___|             |
|_______________________|

Answer 3

这取决于。根据标准，百分比值对于每个属性可以具有不同的含义（CSS2.1：4.3.3 百分比）：

百分比值的格式（在此规范中用<percentage>表示）是一个紧跟"%"的<number>。

百分比值始终相对于另一个值，例如长度。允许百分比的每个属性还定义百分比所引用的值。该值可以是同一元素的另一个属性的值、祖先元素的属性或格式上下文的值（例如，包含块的宽度）。为根元素的属性设置百分比值并且百分比定义为引用某个属性的继承值时，结果值是该属性初始值的百分比乘以。

例如，边距是根据其包含块的宽度计算的（CSS2.1：边距属性）：

百分比是根据生成的框的包含块的宽度计算的。请注意，"边距顶部"和"边距底部"也是如此。如果包含块的宽度取决于此元素，则生成的布局在 CSS 2.1 中未定义。

请注意，quirksmode会在IE中搞砸很多事情，因为将使用错误的盒子模型。