流畅的布局，内容与填充和边距的差异

Question

所以我只想抓住这个概念。在下面的图像中，您可以看到子元素的总宽度为250px，并且它们都被10 px的填充所包围。因此，我们需要获得目标/上下文所需的百分比。我不明白的部分是，要获得总宽度的百分比（250px），我们根据父母的总宽度（590px）计算，但要计算填充的百分比（10px），我们这样做是基于父母的内部宽度（570px）..那为什么呢？或者更具体地说，为什么不是从570px计算的250px百分比，因为看起来570px div的填充没有限制250px块占用的空间。我在这里缺少什么？

Answer 1

我发现这个图表有点令人困惑，单独使用它很难回答你的问题，我希望 this example I've mocked up 会有所帮助（通常更容易查看实时代码） - 请务必阅读源代码并使用Chrome开发者工具检查各个元素的大小（指标部分，只需将元素选项卡打开时悬停在各个<div>上）或浏览器等效。

在图中，他们使用了百分比，但通过四舍五入使事情变得困惑;在进行响应式设计时，不要向上/向下舍入百分比，只需使用确切的数字（或者如果您正在绘制图表，显示目标和上下文计算），浏览器（除了一些古老的例外）总能应对多个小数位。 （理想情况下，你会使用像SASS这样的CSS预处理器来为你做数学计算。）

另外，我通过只有两列并左/右浮动来简化事情，我认为图中的第三个中心20px列让人难以理解。首先使用相同的左/右填充来处理所有内容然后担心更复杂的东西，如果你真的需要内部的东西，只使用第三个div。

您还需要了解box-model - 子元素宽度为250px，但如果有250px宽的盒子并使用CSS添加10px填充大小，则显示宽度将为270px，因为它是宽度（或高度），加上任何边框，加上填充。这可能会让人感到困惑 - 你真正想要的东西仍然是250px宽，内部有10px左/右填充 - 通常更容易关闭这种行为 - 就像在我的例子中一样 - 使用box-sizing: border-box;（有一个Mozilla前缀）需要）。

在设置灵活边距或填充时，始终使用父级（元素的容器）作为上下文。您可能会注意到我在.rectangle的计算中使用了570而不是590，因为570px是您必须使用的第1列的有效宽度，20px只是在任何一侧填充，我仍然在寻找虽然在父元素，没有别的。矩形也有左/右边距，以便将东西分开;如果你想让它与列文本齐平，你可以删除那些或替换第一个矩形上的右边距。

希望这会有所帮助......