Html 如果我的数学是对的，这应该居中，对吗？

从我读到的内容来看，表示为%的填充基于父容器进行计算（就像边距一样）。因此，如果是这种情况，那么下面的3个元素应该在父div上均匀分布。但是，它们不是

如果我算对了，你可以像这样把宽度分开：

2%左侧填充

2%右侧填充

12%（4%x 3）所有三个元素的左边距

12%（4%x 3）所有三个元素的右边距

72%（24%x 3）所有三个元素的宽度

---

100%所有百分比的总和，因此三个元素应均匀分布

我错过什么了吗？填充不是这样计算的吗？我的数学错了吗

#父级{
背景色：#F00；
显示：块；
溢出：隐藏；
右边距：自动；
左边距：自动；
最大宽度：850px；
填充：2%；
}
.元素{
背景色：#0F0；
显示：块；
浮动：左；
高度：100px；
宽度：24%；
左缘：4%；
保证金权利：4%；
}

填充：2%#parent
上的code>表示包含块宽度的2%，而不是
#parent
本身

参考资料：
注意，根据生成框的包含块的宽度计算百分比
填充
或
边距

什么是a

在CSS 2.1中，许多框的位置和大小是根据称为包含块的矩形框的边计算的。通常，生成的框充当子体框的包含块；我们说长方体为其子体“建立”包含块。短语“盒子的包含块”表示“盒子所在的包含块”，而不是它生成的块

在您的示例中，
#parent{padding:2%；}
是基于其父
body
元素计算的，而不是
#parent
本身，尤其是当视口的宽度大于
850px
时

此外，总宽度（包括
.element
div的左右边距）始终占据包含块
#父块
边缘的96%

因此，您对
100%
的总计算是不正确的。请参阅下面更新的演示


#父级{
背景色：#F00；
溢出：隐藏；
右边距：自动；
左边距：自动；
最大宽度：850px；
}
.元素{
背景色：#0F0；
浮动：左；
高度：100px；
宽度：计算值（68%/3）；
利润率：4%；
}
.要素：第一个孩子{
剩余利润：8%
}
.element:最后一个孩子{
保证金权利：8%
}
元素占父容器的96%，而不是100%。要均匀分布，它们需要占据父容器的100%。
百分比，并相对于父容器进行解析

对于
.element
项，包含的块是
.parent
的内容边缘。不是填充或边距，因此它不包括
.parent
上的
填充：2%

例如，如果
.element
是绝对定位的（并且
.parent
是相对定位的），则它们的包含块将是
.parent
的填充边。当然，这将完全占用
.element
，并弄乱您的布局


#父级{
背景色：#F00；
显示：块；
溢出：隐藏；
右边距：自动；
左边距：自动；
最大宽度：850px；
填充：2%；
高度：100px；
位置：相对位置；
}
.元素{
背景色：#0F0；
位置：绝对位置；
高度：100px；
宽度：24%；
左：06%；/*[[2%+4%]+24%+4%+24%+4%+4%+24%+4%+24%+4%+4%+4%+4%+4%+4%+2%*/
}
.元素+.元素{
左：38%；/*[2%+4%+24%+4%+4%]+24%+4%+4%+24%+4%+4%+4%+4%+4%+2%*/
}
.元素+.元素+.元素{
左：70%；/*[[2%+4%+24%+4%+4%+24%+4%+4%]+24%+4%+2%*/
}
有几个问题

首先，
padding:2%
引用父对象，因此不能以这种方式添加

其次，您可能希望父对象的宽度为850px。有一个盒子模型开始发挥作用。您需要使用
框大小：边框框
，因为这意味着填充包含在宽度中

最后，以百分比表示的元素宽度是指父元素中的可用空间，使25.3333%成为正确的值（25.333%+8%=33.333%）

请参阅：
基本上您需要的是整数边距宽度和整数框宽度

不存在等于100的或的整数组合

因此，基本上，你不能用这些约束做你想做的事情。
Ah，换句话说，填充不是计算宽度的一部分？“我以为这是从边境算起的。”乔纳唐兰特通常不是。这很好。内容中的百分比相对于内容区域进行解析。如果是填充区域，则宽度为
100%
的子项将溢出。请注意，宽度为
100%
、无边距且填充为2%的子项仅在框大小为
的情况下才会溢出：内容框
，请参阅：@JoostS I假设没有填充。否则是，使用
框大小调整：内容框
时，即使相对于父块的内容区域解析了百分比，它也会溢出。CSS不是必需的整数。@Oriol这是真的。我忘了。我想它指的是父级中可用的内容空间（宽度减去填充）。你怎么认为？