通过一个实例理解 offsetLeft，offsetTop; offsetWidth , offsetHeight
obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型
obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型
obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型
obj.offsetHeight 指 obj 控件自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的高度，整型
event.clientX(Y)分别是鼠标相对于浏览器内容窗口左边和上边的偏移像素数值
注意：这几个量返回的都是数值，要是用的话另需要加上单位“px”。
为了更好地理解这几个属性的含义，通过一个代码示例来看一下。
最后的效果如图，可以利用键盘的上下左右控制红色方块在大盒子里移动，不出界。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrap{
width: 500px;
height: 500px;
background: #ccc;
margin: 50px auto;
position: relative;
}
#box{width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="wrap">
<div id="box"></div>
</div>
</body>
<script>
var timer1=null;
var wrap=document.getElementById('wrap');
var box=document.getElementById('box');
var m=0,n=0;
var a,b,c,d;
timer1=setInterval(function() {
if (a) {
m=box.offsetLeft-10;
if (m<=0) {
m=0;
};
box.style.left=m+'px';
};
if (b) {
n=box.offsetTop-10;
if (n<=0) {
n=0;
};
box.style.top=n+'px';
};
if (c) {
m=box.offsetLeft+10;
if (m>=wrap.offsetWidth-box.offsetWidth) {
m=wrap.offsetWidth-box.offsetWidth;
};
box.style.left=m+'px';
};
if (d) {
n=box.offsetTop+10;
if (n>=wrap.offsetHeight-box.offsetHeight) {
n=wrap.offsetHeight-box.offsetHeight;
};
box.style.top=n+'px';
};
},10)
document.onkeydown=function(e) {
if (e.keyCode==37) {
a=true;
};
if (e.keyCode==38) {
b=true;
};
if (e.keyCode==39) {
c=true;
};
if (e.keyCode==40) {
d=true;
};
};
document.onkeyup=function(e) {
if (e.keyCode==37) {
a=false;
};
if (e.keyCode==38) {
b=false;
};
if (e.keyCode==39) {
c=false;
};
if (e.keyCode==40) {
d=false;
};
};
</script>
</html>
要注意为父级设置position：relative; 否则，box会默认body为父级，不受wrap限制。
box.offsetTop；box.offsetLeft: 指的是box相对于wrap偏移的距离。
box.offsetWidth；box.offsetHeight:指的是box的可视宽度和高度。
