使用百分比(％)时如何计算填充? [英] How is padding calculated when using percentage (%)?

问题描述

为什么此示例中的填充不等于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％填充?

注意事项:我不仅在寻找解决方案，而且还了解填充在这里的工作方式.

解决方案

TL; DR

根据父母的宽度来计算填充

---

首先，您应该注意:

百分比:
相对于生成的框的包含块的宽度 [...](来源:非flexbox布局，顶部和底部的填充也相对于包含块的宽度).

具有框大小:边框框

更改默认的盒模型到边框，填充(和边框)包含在元素的宽度中，如您的示例所示.因此，

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

右填充必须为父级宽度的50％，但元素的总宽度为600px宽.填充权是元素宽度的50％的唯一时刻是parent width = element width(请注意，在您的示例中不会发生这种情况，因为父对象是body并且body具有默认的边距).

解决方法:
如果希望填充为元素宽度的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

Why does the padding in this example not equal 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>

• Where is the browser deriving it's calculation, 50% of what?

• In the example below the padding actually becomes smaller as the container of #Test becomes larger.

• I actually want the width of #Test to be dynamic however I've fixed it for the purpose of this example.

• And how do I get 50% padding of #Test?

Notes: I am not just looking for a solution but an understanding of the way padding is working here.

解决方案

TL;DR

The padding is calculated according to the parent's width

---

First, you should note that:

Percentage:
The percentage is calculated with respect to the width of the generated box's containing block [...] (source: w3c, emphasis mine)

This means the padding is calculated according to the parent element width (it's worth to note that in non flexbox layouts, padding top and bottom are also relative to the width of the containing block).

With box-sizing: border-box

When you change the default box-model to border-box, the padding (and border) is included in the width of the element like in your example. So with

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

The right padding must be 50% of parent's width but the overall width of element is 600px wide. The only moment the padding right is 50% of element's width is when parent width = element width (Note that this can't happen in your example because the parent is body and body has a default margin).

Workaround:
If you want the padding to be 50% of the element's width, in this box model you can:

• set a fixed padding: width:600px; padding-right: 300px;
• give the element a fluid width : width:50%; padding-right:25%;

---

Without box-sizing: border-box

In the default box-model, the padding isn't included in the width of the element so element width = 600px + 50% of parent's width as you can see in the following example:

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

Workaround:
If you want the padding to be 50% of the element's width, in this box model you can:

• set a fixed padding: width:300px; padding-right: 300px;
• give the element a fluid width : width:25%; padding-right:25%;

---

References:

• The box model MDN, W3C
• The padding property : MDN, W3C
• The box-sizing property : MDN W3C

这篇关于使用百分比(％)时如何计算填充?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！