关于JS和CSS结合的一个问题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>测试</title>
</head>
<body style="border:1px solid red; height:1000px; width:800px; margin: 200px; padding:100px">
  <form id="form1" runat="server">
     <!--注意: body 和 div test 都设置了边距，边距只是在垂直方向上重叠，在水平方向上不重叠, -->
     <div style="border:1px solid red; height:500px; width:500px; margin-top:50px; overflow:scroll;" id="test" onclick="justAtest()">
       <div style="height:600px; float:left; width:220px; overflow:scroll;border:1px solid red " id="test2">
          <div style="height:700px;border:1px solid red;margin:5px;padding:3px" id="test4"></div>
       </div>
       <div style="height:550px; float:left; width:250px; border:1px solid red" id="test3"></div>
    </div>
  </form>
</body>
<script language="javascript">
function justAtest(){
  var test= document.getElementById("test");
  var test2=document.getElementById("test2");
  var test3=document.getElementById("test3");
  var test4=document.getElementById("test4");
  alert("offsetWidth " + test4.offsetWidth); // 193 // 实际宽度
  alert("offsetHeight " + test4.offsetHeight); // 708, 其实就是盒子的 height + padding + border,
  alert("offsetLeft " + test4.offsetLeft); // 5 // 就是就是盒子自身的边距啊
  alert("offsetTop " + test4.offsetTop); // 5, // 就是就是盒子自身的边距啊
  alert("offsetParent: " + test4.offsetParent.id); // test2
  alert("offsetParent.offsetLeft: " + test2.offsetLeft); // 0
  alert("offsetParent.offsetTop " + test2.offsetTop); // 0
  alert("offsetParent.offsetTop " + test2.offsetParent.id); // test
  alert("offsetParent.offsetLeft: " + test.offsetLeft); // 100 , Q1, 为什么 test 的 offsetLeft是100??
  alert("offsetParent.offsetTop " + test.offsetTop); // 100
  alert("document.body.offsetLeft: " + document.body.offsetLeft); // 200  Q2,难道一个对象的offsetLeft就是其自身的边距吗？为什么呢？
  alert("document.body.offsetTop " + document.body.offsetTop); // 200 是自身的边距
  //alert(test3.offsetHeight); // 552   
  //alert(test2.offsetHeight); // 602
  //alert(test.offsetHeight); // 502     
  //alert(document.body.offsetHeight); // 1002
}
//相信你了解了这个,对width,clientWidth,scrollWidth,offsetWidth已经不陌生了吧,只不过一个是长一个是宽的问题了.
</script>
</html>