子容器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值.