使用百分比 (%) 时如何计算填充？答案

【问题标题】：How is padding calculated when using percentage (%)?使用百分比 (%) 时如何计算填充？
【发布时间】：2016-04-17 08:11:01
【问题描述】：

为什么这个例子中的内边距不等于 300px？

#Test{
  width:600px;
  padding-right:50%;
  box-sizing:border-box;
  background:#ddd;
}

<div id="Test">
TEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ H
</div>

浏览器在哪里得到它的计算，50% 是什么？
在下面的示例中，填充实际上随着#Test 的容器变大而变小。
我实际上希望#Test 的宽度是动态的，但是为了本示例的目的，我已对其进行了修复。
我如何获得#Test 的 50% 填充？

注意：我不只是在寻找解决方案，而是在了解填充的工作方式。

【问题讨论】：

50% 是相对度量。您应该问的问题是该度量是相对的TO。

标签： css padding box-sizing

【解决方案1】：

TL;DR

padding是根据parent的宽度计算的

首先，您应该注意：

百分比：
百分比是根据生成的框的包含块的宽度 [...]（来源：w3c，重点是我的）

这表示padding是根据父元素宽度计算的（值得注意的是，在non flexbox layouts中，padding top和bottom也是相对于包含块的宽度）。

使用 box-sizing:border-box

当您将默认 box-model 更改为 border-box 时，填充（和边框）将包含在元素的宽度中，就像您的示例中一样。所以与

width:600px;
padding-right:50%;
box-sizing:border-box;

右内边距必须是父元素宽度的 50%，但元素的总宽度为 600 像素宽。填充权为元素宽度的 50% 的唯一时刻是 parent width = element width （请注意，这在您的示例中不会发生，因为父级是 body 并且 body 具有默认边距）。 p>

解决方法：
如果您希望内边距为元素宽度的 50%，在此框模型中您可以：

设置固定填充：width:600px; padding-right: 300px;
给元素一个流动的宽度：width:50%; padding-right:25%;

无框尺寸：边框框

在默认的盒子模型中，填充不包含在元素的宽度中，所以element width = 600px + 50% of parent's width 如下例所示：

#Test{
  width:600px;
  padding-right:50%;
  background:#ddd;
}

<div id="Test">
TEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ H
</div>

解决方法：
如果您希望内边距为元素宽度的 50%，在此框模型中您可以：

设置固定填充：width:300px; padding-right: 300px;
给元素一个流动的宽度：width:25%; padding-right:25%;

参考资料：

盒子型号MDN,W3C
填充属性：MDN，W3C
box-sizing 属性：MDN W3C

【讨论】：

考虑到这一点，如何为元素创建所需的百分比宽度？
@Obsidian 在你的情况下很好，这很简单，因为你有一个固定的 px 宽度，你也可以给填充一个 px 值，例如：padding-right:300px;
:) 在动态元素上我假设我必须包含一个额外的嵌套 div？
@Obsidian 您可以这样做，或者，如果您希望元素具有 50% 的宽度并且填充等于 i 宽度的 50%，则可以将填充的值设置为 25%，因为 @987654341 @.
@Josh Crozier：不要链接到 REC-CSS2 - 这是 1998 年的规范，某些部分包含与 CSS2.1 的差异。

【解决方案2】：

它与父元素的宽度有关，除非父元素的宽度取决于这个。

来自 W3C 的CSS 2.1 Specification：

百分比是根据生成框的包含块的宽度计算的，即使对于“padding-top”和“padding-bottom”也是如此。如果包含块的宽度取决于此元素，则结果布局在 CSS 2.1 中未定义。

【讨论】：