了解灵活的填充

Question

在常规盒模型下：

Ethan Marcotte在 Responsive Webdesign 中，第 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

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

这就是说，如果您参考有关百分比填充计算的规范：

百分比

百分比是根据生成的框包含块的宽度计算的，[...]

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