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%值是正确的。

了解灵活的填充

1 个答案: