总结： 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） 上边框内边缘的距离。注意考虑到父级的内边距：如果父级相对定位relative，子级绝对定位absolute的话，不考虑父级内边距；如果子级相对定位，父级绝对定位，加上内边距 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; 这是兼容写法
