2

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

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

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

4

3 回答 3

3

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

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

最后一种情况下的 20% 最终会变成 40px。

于 2012-05-31T10:30:17.657 回答
2

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

 _______________
|    ___        |
|20%|   |       |
|   |___|       |
|_______________|
 _______________________
|      ___              |
|20%  |   |             |
|     |___|             |
|_______________________|
于 2012-05-31T10:40:24.043 回答
1

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

百分比值的格式（<percentage>在本规范中表示为）是<number>紧随其后的 '%'。

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

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

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

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

于 2012-05-31T10:56:52.960 回答