width:100% 在position:absolute；下的变化

Question

借前辈 segmentfault.com/u/sy_52 的提问https://segmentfault.com/q/10... 继续学习。
两个盒子：

<div class="box1">
    <div class="box2"></div>
</div>

现在父元素已经开启了相对定位，并设置padding。子元素暂不开启绝对定位

.box1{
width：600px;
padding:10px;
position:relative;
}
.box2{
width:100%;
/* position:absolute; */ 
/* top:20px;*/          
}

此时子元素box2一切正常，width等于父元素box1 的width为600px，如图：

现在把子元素的绝对定位加上，width却成了620px

可以看到，即使父元素开启了相对定位，子元素使用绝对定位时，width：100%； 依然会受影响，这又是为什么？

另外，虽然可以用width：auto；属性将子元素设为宽度由内容撑开，避免超出父元素，可子元素内容过多时仍然不适用。或者说需求就是要子元素充满父元素内容区而不溢出又该怎么办？提前谢谢了！！

Answer 1

这就是为什么处理css兼容性问题时总是要加上* {box-sizing: border-box;}，因为他的影响真的很严重。

box1设置width：600px;padding:10px;，那么它的左边框到右边框的距离实际就是620px，box2设置绝对定位后脱离了文档流，此时他的宽度受限就不再是box1的content(600px)部分，而是box1左边框到右边框的距离620px。

想要box2的宽度从box1做边框开始定位，那么加上left: 0;就行，如果想让它左右位置不变，那么可以设置width: inherit;