Question

为什么此示例中的填充不等于300px？

＆＃13;

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

＆＃13;

<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>

＆＃13;

浏览器在哪里计算，50％的是什么？
在下面的示例中，随着#Test的容器变大，填充实际上变小了。
我实际上希望#Test的宽度是动态的，但是为了这个例子，我已经修复了它。
如何获得#Test的50％填充？

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

Answer 1

TL; DR

根据父母的宽度计算填充

首先，您应该注意：

<强>百分比：
百分比是根据生成的框的包含块 [...]的宽度计算的（来源：w3c，强调我的）

这意味着填充是根据父元素宽度计算的（值得注意的是，在non flexbox layouts中，填充顶部和底部也相对于宽度为包含块）。

使用box-sizing：border-box

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

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

右边填充必须是父宽度的50％，但元素的总宽度为600px宽。填充右边是元素宽度的50％的唯一时刻是parent width = element width（请注意，在您的示例中不会发生这种情况，因为父级是正文，正文具有默认边距）。

解决方法：
如果您希望填充为元素宽度的50％，则可以在此框模型中：

设置固定填充：width:600px; padding-right: 300px;

为元素指定流体宽度：width:50%; padding-right:25%;

没有框大小：border-box

在默认的框模型中，填充不包含在元素的宽度中，因此您可以在以下示例中看到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

大小调整属性：MDN W3C

Answer 2

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

来自W3C的CSS 2.1 Specification：

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

使用百分比（％）时如何计算填充？

2 个答案:

TL; DR

使用box-sizing：border-box

没有框大小：border-box