如何確定百分比填充？

我知道從the spec基於百分比填充使用其包含塊來確定其寬度。如何確定百分比填充？

但是這個例子中的包含塊是什麼？

HTML：

<div id="outer"> 
    <div id="inner">&nbsp;</div> 
</div>

風格：

* { 
    box-sizing: border-box; 
} 

#outer { 
    width: 100px; 
} 

#inner { 
    width: 50%; 
    padding: 5%; 
}

經計算的#inner填充是在2.5px或5px？任何指向和/或外部來源的鏈接都可以解釋正在發生的事情以及爲什麼進一步詳細說明，我們將非常感謝。

Box model - 8.4 Padding properties

的百分比相對於計算所生成的寬度盒子的包含塊。

因此，#inner的填充將基於包含塊，其在此情況下將是父元素#outer。

#inner的填充將是5%。

Visual formatting model - 9.1.2 Containing blocks

一般而言，產生盒作爲含塊後代盒（由在dev的工具檢查計算定型確認）;我們說一個盒子爲它的後代「建立」包含塊。短語「一個盒子的包含塊」是指「盒子所在的包含塊」，而不是它所生成的那個塊。

2013-12-11 19:09:23

所以這是不管爲'＃inner'設置了什麼寬度？ –

對我來說這似乎很奇怪，但是謝謝。這爲我闡明瞭它。 –

@DaxKieran這似乎是正確的 - 是的。在這種情況下，'＃inner'的'width'不會影響計算。 –

答案是肯定的。

「百分比是指在包含塊的寬度。」

2013-12-11 19:09:15 Tomzan

回答