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

Question

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

为什么一个div中2％的边距最终为20像素而另外30个像素？宽度是否起作用？在这种情况下，这意味着更广泛的div有更大的余量，但从我的观察结果来看并非如此！

检查一下：http://JSNAIL.IT/uLjeYSHx/。具有类col2的div比其他类更大，但它具有相同的margin-right计算。 （11像素）

Answer 1

保证金的百分比取决于您缩放的相对方框。

因此，如果你在整个页面上占一个百分比，那么如果你把它放在一个宽度为200px的盒子里就会更多。

最后一个案例中的20％将最终为40px。

Answer 2

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

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

Answer 3

这取决于。根据标准（CSS2.1: 4.3.3 Percentages）：

，每个属性的百分比值可能具有不同的含义

  

百分比值的格式（在本规范中用<percentage>表示）是<number>后紧跟'％'。

     

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

例如，边距按其包含块（CSS2.1: Margin properties）的宽度计算：

  

百分比是根据生成的框的包含块的宽度计算的。请注意，对于“margin-top”和“margin-bottom”也是如此。如果包含块的宽度取决于此元素，则在CSS 2.1中未定义结果布局。

请注意，quirksmode会搞乱IE中的许多内容，因为将使用错误的盒子模型。