overflow:scroll;这个属性应该注意，加上这个属性后，元素出现滚动条，但是其真正的宽和高不会增加，但是会占用width和heigth的空间，也就是说如果出现滚动条，这个时候元素的width和heigth的值为滚动条的宽度加上现在的width或heigth。
scrollTop这个属性需要当前元素的内容要比当前元素的高度高，当滚动条向下滚动的时候，滚动上去的那部分，即看不见了的那部分为scrollTop。
scrollHeight这个属性需要当前元素的内容要比当前元素的高度高，也就是内部内容的实际高度。
offsetTop注意，这个属性不是到其父元素的举例，而是border上边界（不包括border）到浏览器上边界的距离。
offsetHeigth没有这个属性。
clientTopclient，故名思议，就是我们能看见的部分，当然不包括margin，因为我们是看不见的，能看见的也就是border，padding和width或heigth，排除clientHeigth部分，剩下的也就是clientTop了。
clientHeight根据上面的可见部分，这个属性包括padding和width的内容（注意，是不包括滚动条部分的）。
下面附上源码（和上面显示有点区别，上面是在编辑器中的效果）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<title>高级盒子模型测试</title>
<script src="./jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="./test.js" type="text/javascript"></script>
</head>
<body>
<div style="border:3px solid gray;">
<div id="ele01" style="width:100px;height:200px;background-color:green;margin:20px;padding:10px;border:5px solid red;overflow:scroll;">
<font>测试测试测试测试测试测试</font></br>
<font>测试</font></br>
<font>测试</font></br>
<font>测试</font></br>
<font>测试</font></br>
<font>测试</font></br>
<font>测试</font></br>
<font>测试</font></br>
<font>测试</font></br>
<font>测试</font></br>
<font>测试</font></br>
<font>测试</font></br>
<font>测试</font></br>
<font>测试</font></br>
</div>
<div>
<b>overflow:scroll;</b>这个属性应该注意，加上这个属性后，元素出现滚动条，但是其真正的宽和高不会增加，但是会占用width和heigth的空间，也就是说
如果出现滚动条，这个时候元素的width和heigth的值为滚动条的宽度加上现在的width或heigth。</br>
</br>
<b>scrollTop</b>这个属性需要当前元素的内容要比当前元素的高度高，当滚动条向下滚动的时候，滚动上去的那部分，即看不见了的那部分为scrollTop。</br>
<b>scrollHeight</b>这个属性需要当前元素的内容要比当前元素的高度高，也就是内部内容的实际高度。</br>
</br>
<b>offsetTop</b>注意，这个属性不是到其父元素的举例，而是border上边界（不包括border）到浏览器上边界的距离。</br>
<b>offsetHeigth</b>没有这个属性。</br>
</br>
<b>clientTop</b>client，故名思议，就是我们能看见的部分，当然不包括margin，因为我们是看不见的，能看见的也就是border，padding和width或heigth，排除clientHeigth部分，剩下的也就是clientTop了。</br>
<b>clientHeight</b>根据上面的可见部分，这个属性包括padding和width的内容（注意，是不包括滚动条部分的）。</br>
</div>
</div>
</body>
</html>
一张网上找的模型图片：
推荐文章地址：
http://www.cnblogs.com/yuteng/articles/1894578.html