CSS 中的 100% + padding

在本文中，我们将介绍在 CSS 中使用百分比宽度和添加 padding 时的一些注意事项。

阅读更多：CSS 教程

百分比宽度

使用百分比宽度是在 CSS 中常见的做法之一。它允许我们根据父元素的宽度来设置子元素的宽度，使得网页能够自适应不同屏幕尺寸。然而，在应用百分比宽度时需要注意以下几点：

父元素的宽度

首先，要注意百分比宽度是相对于父元素的宽度来计算的。父元素指的是包含子元素的容器元素。例如，如果一个 div 元素的宽度被设置为 80%，那么它的宽度将是父元素宽度的 80%。

直接父元素

其次，在计算百分比宽度时，只会考虑最直接的父元素。如果一个 div 元素有一个嵌套的 div 元素，外层 div 的宽度设置为 80%，而内层 div 的宽度设置为 100%，那么内层 div 的宽度将是外层 div 元素宽度的 100%，而不是父元素宽度的 80%。

相对父元素的 padding

但是，当父元素设置了 padding 时，百分比宽度的计算方式会发生变化。正常情况下，父元素的宽度是包括 padding 的，也就是说，padding 不会影响子元素的宽度计算。然而，当使用百分比宽度时，父元素的宽度将不再包括 padding，而是不包括 padding 时的宽度。

示例说明

下面我们通过示例来说明以上所述。假设有一个 div 容器元素，宽度为 200px，padding 为 20px，内部还有一个 p 元素。我们希望 p 元素的宽度占据 div 容器元素的 80%。

<div class="container">
  <p>这是一个段落。</p>
</div>

.container {
  width: 200px;
  padding: 20px;
}

p {
  width: 80%;
}

根据 previously 的说明，我们期望 p 元素的宽度为 (200 – 20*2) * 0.8 = 160px。然而，实际情况并非如此。

由于父元素的 padding 影响了百分比宽度的计算，p 元素的宽度实际上是 (200 – 202) * 0.8 – 202 = 120px。即使设置了百分比宽度为 80%，也无法得到我们期望的结果。

解决这个问题的方法是使用 calc() 函数。calc() 函数在 CSS 中可以执行简单的数学运算。我们可以通过以下方式来重新计算 p 元素的宽度：

p {
  width: calc(80% - 20px*2);
}

这样，p 元素的宽度将得到正确的计算结果：(200 – 202) * 0.8 – 202 = 160px。

总结

在 CSS 中，当使用百分比宽度时，父元素的 padding 会影响宽度的计算。为了解决这个问题，可以使用 calc() 函数来减去父元素中的 padding 值。这样可以确保子元素的宽度能够正确地计算出来。弄清楚百分比宽度和 padding 的关系，将有助于我们在 CSS 中更好地控制元素的布局和样式。