子元素宽高设置为100%后，宽高都超出父级

最近写样式遇到了如下现象：子集设置宽高为100%，但是溢出了父级，如下图所示。

通过查阅资料，获知了原因。

css盒子模型有4层：margin、border、padding、content。

当元素没有进行定位时，子集元素设置的宽度和高度的百分比，是根据content区计算的，也就是说，没有把padding、border计算进去。

而使用绝对定位时，子集元素的宽高是根据父级元素的padding盒子计算的，也就是说子集的宽度 = 父级左padding + content + 父级右padding，子集的高度 = 父级上padding + content + 父级下padding。

示例代码：

//没用定位
<div style="height:100px;width:100px;padding:20px;border:10px solid #ccc;margin:10px auto;">
	<div style="height:100%;width:100%;background-color:#00796B;"></div>
</div>
//用了绝对定位
<div style="height:100px;width:100px;padding:20px;border:10px solid #ccc;position:relative;margin:10px auto;">
	<div style="height:100%;width:100%;position:absolute;background-color:#00796B;"></div>
</div>

运行结果如下图，没用定位的子集宽高都是100，用了定位的子集的宽 = content宽度 + padding20 *2 = 140，高度同理。