使用百分比(％)时如何计算填充?

解决方法:如果希望填充为元素宽度的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 W3CWhy 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. 解决方案First, you should note that: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-boxWhen 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 withwidth: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-boxIn 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, W3CThe padding property : MDN, W3CThe box-sizing property : MDN W3C 这篇关于使用百分比(％)时如何计算填充?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！