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

Question

为什么这个例子中的填充不等于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是动态的,但是为了这个例子,我已经修复了它.

• 我如何得到50%的填充#Test？

注意:我不只是在寻找解决方案,而是了解padding在这里工作的方式.

Answer 1

TL; DR

填充是根据父级的宽度计算的

首先,你应该注意到:

百分比:
百分比是根据生成的框的包含块 [...] 的宽度计算的(来源:w3c,强调我的)

这意味着填充是根据父元素宽度计算的(值得注意的是,在非flexbox布局中,填充顶部和底部也相对于包含块的宽度).

使用盒子大小:边框

当您将默认的框模型更改为边框时,填充(和边框)包含在元素的宽度中,如示例中所示.所以

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

没有盒子大小:边框

在默认的框模型中,填充不包含在元素的宽度中,因此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