总结：
1.包含内边距和边框的大小 offsetHeight offsetWidth
2.不包含边框，但是要考虑子级超过自己时，滚动条的宽度和高度 clientHeight clientWidth
3.子级不超过时和client一样，超过以子级为准 scrollHeight scrollWidth
4.与父级的距离，附近要有定位，否则以body为父级 offsetTop offsetLeft
5.边框的大小 clientTop clientLeft
6.对应区间内滚轮的位置，要用滚动事件。否则只会输出一次 scrollTop scrollLeft
上图基本解释了位置坐标的计算问题，但是还需要考虑的是如果content内的子级超过了本身的高度和宽度的，那么如果采用overflow：auto的情况下，那么滚动条的高度和宽度会对clientHeight和clientWidth造成影响，而滚动条的宽高无法直接得到，所以一般采用offsetHeight - clientHeight - 边框*2
具体分析：
1.offsetHeight offsetWidth
offsetWidth = width + 左右padding + 左右boder
offsetHeight = Height+ 上下padding + 左右boder
2.clientHeight clientWidth
情况一：如果子级不超过父级区域或者超出隐藏
clientWidth = width+左右padding
clientHeight = height+上下padding
情况二：如果子级超过父级区域并且采用overflow：auto
clientWidth = width+左右padding - 滚动条的宽度
clientHeight = height+上下padding - 滚动条的高度
3.scrollHeight scrollWidth
一句话：如果子级不超过父级，那么和clientHeight clientWidth一样，超过了就以子级的宽高计算，即使父级使用超出隐藏也一样
scrollWidth：获取指定标签内容层的真实宽度（可视区域宽度+被隐藏区域宽度）
scrollHeight：获取指定标签内容层的真实高度（可视区域高度+被隐藏区域高度）
4.offsetTop offsetLeft
情况一：父级有定位的情况下
offsetTop：当前元素上边框外边缘到最近的已定位父级（offsetParent） 上边框内边缘的距离。注意考虑到父级的内边距
offsetLeft：当前元素左边框外边缘到最近的已定位父级（offsetParent） 左边框内边缘的距离。
情况二：父级没有定位，那么就以body作为父级计算
offsetTop：当前元素到body顶部的距离
offsetLeft：当前元素到body左边的距离
5.clientTop clientLeft
clientTop = boder.top(上边框的宽度)
clientLeft = boder.left(左边框的宽度)
6.scrollTop scrollLeft
获取这个值一般写在onscroll事件内，否则就只会输出一次
scrollTop :内容层顶部 到 可视区域顶部的距离。就是垂直方向滚动条高度
实例：var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 这是兼容写法
scrollLeft :水平方向滚动条的位置
实例：var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; 这是兼容写法