当子元素宽度和高度都超出父元素的宽度和高度时，就会产生内容溢出元素框。overflow 属性规定当内容溢出元素框时发生的事情。overflow 为CSS中设置当对象的内容超过其指定高度及宽度时如何管理内容的属性。

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

所以前面在设置时：

<div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto">

                <div style="height:400px;width:400px">请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>

子元素的范围超出了父元素，产生滚动条，后面定义了overflow:auto，设置了滚动条的属性。

应该是里面的那个div的高度和宽度大于外面那个div的宽高，为了能放得下就会自动添加滚动条。

 <div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto">

                <div style="height:400px;width:400px">请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>