子容器widht為100%時,可得到的實際寬度比父級容器的長度要長

如下例子:

<div  style="width:100px;height:100px">

    <p style="width:100%;padding-left:10px;border-left:20px">子容器會為130px</p>

</div>

出現如上情況是 因為p標籤的box-sizing屬性預設為content-box(元素的寬度和高度為內容的寬和高);

所以p標籤的width:100%;等於父級容器,為100px，而實際情況還要加上padding和marign的值。

而如果要設定和父級一樣的寬度而不受 padding和border的影響 那麼在 p標籤中設定box-sizing:border-box;

此時設定的寬度就是包含了border和width.

此外box-sizing屬性為padding-box值,即定義的寬度為內容的寬加上左右padding值.