所以我只是想抓住这个概念。在下图中，你可以看到子元素的总宽度是250px，并且它们都被10px的填充所包围。因此，我们需要获得目标/上下文所需的百分比。我不明白的部分是，为了获得总宽度（250px）的百分比，我们根据父宽总宽（590px）计算，但要计算填充百分比（10px），我们基于父母的内部宽度（570px）..那么为什么呢？或者更具体地说，为什么不是从570px计算的250px百分比也是如此，因为看起来570px div的填充没有限制250px块占用的空间。我在这里错过了什么？流体布局，内容与填充和边距的差异
我发现，图中的有点混乱，单独使用它来回答你的问题很难，我希望this example I've mocked up将帮助（通常更容易看直播代码） - 务必仔细阅读源并使用Chrome开发人员工具（“指标”部分，只需将鼠标悬停在单独的“<div>”上，并打开“元素”选项卡）或浏览器的等效项目来检查各个元素的大小。
在图中，他们已经使用了百分比，但是通过四舍五入来混淆了事物;在进行响应式设计时，不要将百分比向上/向下调整，只使用确切数字（或者如果您绘制图表，显示目标和上下文计算），浏览器（有一些古老的例外）可以始终处理多个小数位。 （理想情况下，你会使用像SASS这样的CSS预处理器，它可以为你做数学）。
另外，我通过只有两列并左右浮动它们来简化了一些事情，我认为图中第三个中心20px列使得它更难理解。让它为所有东西先用相等的左/右填充工作，然后担心更复杂的东西，如果你真的需要其中的东西，只使用第三个div。
您还需要知道box-model - 子元素宽度为250像素，但如果具有250像素宽的框并使用CSS添加10像素填充任一大小，则显示宽度将为270像素，因为它是宽度（或高度），加上任何边框，加上填充。这可能会让你感到困惑 - 你实际需要的东西仍然是宽度为250px，其中包含10px的左/右填充 - 通常更容易关闭此行为 - 如box-sizing: border-box;（需要Mozilla前缀）。
您总是进行灵活的设置页边距或填充时使用父（元素的容器）上下文。您可能会注意到我在计算.rectangle时使用了570而不是590，因为570px是您必须使用的第1列的有效宽度，20px仅仅是填充，我仍在查看父元素尽管，没有别的。矩形也有左/右边距来分隔东西;你可以删除它们，或者用第一个矩形的右边距来代替，如果你想让它与列文本齐平。
希望这有助于...
嗨威廉，感谢的是，关于图对不起，它实际上是从一个lynda.com screengrab。为了弄清楚它应该是左边框（590像素）上的20像素填充，两个主框之间的像素边距为20像素，然后在最右边框（350像素）右边填充20像素。然后，对于两个250px的框，有10px的填充。所以我明白你可以通过除以父元素得到百分比，但我没有得到的是老师说要获得内容宽度（250px），可以用总父宽度（590px）尚未计算内部填充（10px围绕250px）你这样做... –
...基于父母的内部宽度（570像素，而不是590总宽度）。所以我只是不明白你为什么要使用590背景为一个，然后为另一个570。 –