几乎所有的浏览器都提供了一套关于元素大小和位置的属性，让我们可以方便的进行控制。
1. 偏移量
offsetWidth：包括元素内容区，垂直滚动条，左右边框，左右内边距的宽度之和（不包括外边距）；
offsetHeight：包括元素内容区，水平滚动条，上下边框，上线内边距的高度之和（不包括外边距）；
offsetLeft：元素左方的外边距距离包含元素左方的内边框之间的距离；
offsetRight：元素上方的外边距距离包含元素上方的内边框之间的距离；
offsetParent：引用包含元素；
注意：上面四个属性都是以像素为单位，offsetParent不一定会是parentNode，parentNode指的是父元素。如果某个元素被包含在某个div中，如果不设置div的position属性为absolute或者relative，offsetParent会指向body。
很多时候，我们要确定元素在页面上的相对位置，我们可以用循环去找offsetParent的方式，直到根元素，并将每次取出来的元素的offsetLeft和offsetTop相加就可以得到相对于页面的偏移量。
function getOffsetPos( element )
{
var pos = {
x: 0,
y: 0
}
while ( element ) {
pos.x += element.offsetLeft;
pos.y += element.offsetTop;
element = element.offsetParent;
}
return pos;
}
2. 客户区大小
clientWidth：包括元素内容区宽度加上左右内边距宽度之和；
clientHeight：包括元素内容区高度加上上下内边距高度之和；
注意：滚动条的高度或宽度不算在内。如果某个宽度是100px的div（内边距为0px）出现了一个垂直滚动条，客户区宽度就会小于100px。通常情况下我们用css设置的width或height是设置的元素内容区的值，即不包括边框（border）和内边距（padding）。
如何取页面视口大小：
function getViewportSize() {
var size = {
w: 0,
h: 0
}
if（ document,body.clientWidth ) {
size.w = document.body.clientWidth;
size.h = document.body.clidentHeight;
} else {
size.w = document.documentElement.clientWidth;
size.h = document.documentElement.clientHeight;
}
return size;
}
3. 滚动计算
scrollHeight：元素内容区加上内边距的实际高度（包含可以滚动的高度）；
scrollWidth：元素内容区加上内边距的实际宽度（包含可以滚动的宽度）；
scrollLeft：滚动之后，隐藏在左侧的区域的宽度，通过设置该属性可以调整滚动位置；
scrollTop：滚动之后，隐藏在上方的区域的高度，通过设置该属性可以调整滚动位置；
如果出现滚动条，滚动属性的值应该是要大于客户区大小的属性，但是没有出现滚动条的时候，各种浏览器表现出来的情况有所不同。为了能取出视口大小最准确的值，可以比较两类属性中的值的大小，取出最大的。
