css - 了解灵活的填充

Question

常规盒子模型下:

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

when setting flexible padding on a element, your context is the width of the element itself.

请看下面的例子:

.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关于百分比填充计算:

percentage

The percentage is calculated with respect to the width of the generated box's containing block, [...]

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