1.clientLeft 和clientTop
这组属性可以获取元素设置了左边框和上边框的大小。
box.clientLeft; //获取左边框的宽度
box.clientTop; //获取上边框的宽度
PS：目前只提供了Left 和Top 这组，并没有提供Right 和Bottom。如果四条边宽度不
同的话，可以直接通过计算后的样式获取，或者采用以上三组获取元素大小的减法求得。
2.offsetLeft 和offsetTop
这组属性可以获取当前元素相对于父元素的位置。
box.offsetLeft; //50
box.offsetTop; //50
PS：获取元素当前相对于父元素的位置，最好将它设置为定位position:absolute；否则
不同的浏览器会有不同的解释。
PS：加上边框和内边距不会影响它的位置，但加上外边据会累加。
box.offsetParent; //得到父元素
PS：offsetParent 中，如果本身父元素是，非IE 返回body 对象，IE 返回html 对
象。如果两个元素嵌套，如果上父元素没有使用定位position:absolute，那么offsetParent 将
返回body 对象或html 对象。所以，在获取offsetLeft 和offsetTop 时候，CSS 定位很重要。
如果说，在很多层次里，外层已经定位，我们怎么获取里层的元素距离body 或html
元素之间的距离呢？也就是获取任意一个元素距离页面上的位置。那么我们可以编写函数，
通过不停的向上回溯获取累加来实现。
box.offsetTop + box.offsetParent.offsetTop; //只有两层的情况下
如果多层的话，就必须使用循环或递归。
function offsetLeft(element) {
var left = element.offsetLeft; //得到第一层距离
var parent = element.offsetParent; //得到第一个父元素
while (parent !== null) { //如果还有上一层父元素
left += parent.offsetLeft; //把本层的距离累加
parent = parent.offsetParent; //得到本层的父元素
} //然后继续循环
return left;
}
3.scrollTop 和scrollLeft
这组属性可以获取滚动条被隐藏的区域大小，也可设置定位到该区域。
box.scrollTop; //获取滚动内容上方的位置
box.scrollLeft; //获取滚动内容左方的位置
如果要让滚动条滚动到最初始的位置，那么可以写一个函数：
function scrollStart(element) {
if (element.scrollTop != 0) element.scrollTop = 0;
}
感
