了解灵活的填充

Question

在正则框模型下：

Ethan Marcotte 在响应式网页设计第 35 页中写道：

在元素上设置灵活填充时，您的上下文是 宽度 元素本身。

请看下面的例子：

.main-wrapper {
  width: 98%; /*960px - to give some space on the viewport*/ 
}

.box-one,
.box-two {
    width: 44.791666666667%; /* 430 / 960 */
    float: left;
    margin: 30px 0 20px 0;
    padding: 2.083333333333%; /* padding should be 20px*/
    text-align: center;
}

.box-one {
    margin-right: 2.083333333333%; 
    /*margin is relative to the container (here 960px), so:
      20/960
    */
    background-color: red;
}

.box-two {
    background-color: blue;
}

<div class="main-wrapper">

  <div class="box-one">
    <p>box one here</p>
  </div>

  <div class="box-two">
    <p>box two here</p>
  </div>

</div>

我的问题是：

根据那本书上写的内容，填充设置为： 不应该是正确的（但它是！）。

padding: 2.083333333333%;

相反： 我们应该考虑元素宽度本身，即430px。但如果我们将该值用作上下文，我们会得到 4.x %。

我没有得到什么？

Answer 1

我没有读过你提到的那本书，很难猜出它在说什么，因为我没有你引用的句子的上下文。

这就是说，如果你参考specs关于百分比填充计算：

百分比

百分比是相对于宽度计算的 生成框的包含块，[...]

所以百分比是根据父母的宽度计算的，因此2.083333333333%的值是正确的。