測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試
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