学习过js的人，相信都曾经被这堆东西困扰：
scrollTop,scrollLeft等等，看着这堆东西就开始犯晕呕吐。
clientWidth:代表浏览器可视区的宽
clientHeight:代表浏览器可视区的高
浏览器可视区宽高变化时，clientWidth和clientHeight也跟着变化
offsetWidth:获取物体自身的宽
offsetHeight：获取物体自身的高（如果有padding和border值，那么包含padding和border值）
offsetLeft：获取的是相对于父对象的左边距
offsetTop：获取的是相对于父对象的上边距
scrollTop:页面向上滚动的距离
scrollLeft：页面向左滚动的距离
scrollWidth:可滚动区域的宽度
scrollHeight：可滚动区域的高度
clientY：当鼠标事件发生时，鼠标相对于浏览器y轴的位置；
screenX：当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置；
screenY：当鼠标事件发生时，鼠标相对于显示器屏幕y轴的位置；
offsetX：当鼠标事件发生时，鼠标相对于事件源x轴的位置
offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置
下面通过详细的案例测试，来说明每一个的含义
<script>var clientW = document.documentElement.clientWidth || document.body.clientWidth;var clientH = document.documentElement.clientHeight || document.body.clientHeight;document.write('clientWidth= '+clientW + " — clientHeight"+clientH);</script>
<style>#box{width: 100px;height: 100px;border: 2px solid #c00;}</style><body><div id="box"></div><script>var oDiv = document.getElementById('box');var divW = oDiv.offsetWidth;var divH = oDiv.offsetHeight;document.write('offsetWidth= '+divW + " — offsetHeight"+divH); /* var clientW = document.documentElement.clientWidth || document.body.clientWidth;var clientH = document.documentElement.clientHeight || document.body.clientHeight;*/</script></body>
#box{width: 100px;height: 100px;border: 2px solid #c00;padding:5px;}
获取的是相对于父对象的左边距 ;
红色的box的父级是浏览器窗口，所以红色box的left和top是相对于浏览器窗口的左边距和上边距
而绿色的box的父级是红色的box，，所以绿色box的left和top值是相对于红色box的左边距和上边距
<div id="box"><div id="box2"></div></div><style>*{padding: 0;margin: 0;}#box{position: relative;left: 100px;top: 100px;width: 400px;height: 400px;border: 2px solid #c00;}#box2{width: 200px;height: 200px;border: 2px solid #0f0;position: absolute;left: 50px;top: 50px;}</style><script>var oBox = document.getElementById('box');var oBox2 = document.getElementById('box2');var boxL = oBox.offsetLeft;var boxT = oBox.offsetTop;var box2L = oBox2.offsetLeft;var box2T = oBox2.offsetTop;document.write(' box的offsetLeft= '+boxL + " –box的offsetTop="+boxT+"<br>");document.write(' box2的offsetLeft= '+box2L + " –box2的offsetTop="+box2T);</script>4 .scrollTop:页面向上滚动的距离
为了测试效果，我特意设定了5个width:2000px;height:400px的div，用不同的颜色区分了它们
有图可见：滚动条测量滚动条滚动的距离，只有70多px，而我们通过scrollTop获取到的值是400多px，可见scrollTop获取的是页面向上滚动了400多px，scrollLeft的也一样
<style>*{padding: 0;margin: 0;}.box{/*position: relative;left: 100px;top: 100px;*/width: 2000px;height: 400px;}.box1{background: green;}.box2{background: blue;}.box3{background: yellow;}.box4{background: red;}.box5{background: black;}</style><div class="box box1"></div><div class="box box2"></div><div class="box box3"></div><div class="box box4"></div><div class="box box5"></div>window.onscroll = function () {var scrollT = document.documentElement.scrollTop || document.body.scrollTop;console.log(scrollT);};5. scrollLeft：页面向左滚动的距离
和scrollTOp同理，获取的时页面向左滚蛋的距离
有图可见，不论滚动条怎么滚动，scrollWidth和scrollHeight获取的值始终是2000和800
你挤进地铁时，西藏的山鹰一直盘旋云端，
