3

为什么这个例子中的 padding 不等于 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？

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

4

2 回答 2

12

TL;博士

padding是根据parent的width计算的

首先，您应该注意：

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

这意味着 padding 是根据父元素宽度计算的（值得注意的是，在非 flexbox 布局中，padding top 和 bottom 也是相对于包含块的宽度）。

带框大小：border-box

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

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

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

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

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

没有 box-sizing：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%;

参考：

于 2016-01-12T16:04:45.217 回答
2

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

来自 W3C 的CSS 2.1 规范：

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

于 2016-01-12T16:08:01.277 回答