client 客户端大小
● client 系列没有参考父级元素
● 只与自身的尺寸有关系(只关心自己的东西，其他与我无关)
● 相当于只把自己当作一个客户端区域，只关心自己内部区域的尺寸大小
● clientLeft/clientTop 边框区域尺寸，不常用
● clientLeft 指的是元素左边框的宽度
● clientTop 指的是元素上边框的宽度
● clientWidth/clientHeight 边框内部大小
● 这里指的是边框以内(不包含边框)元素的大小(padding、content)
● 与 offsetWidth/offsetHeight 相比，少计算了边框的宽度
● 注意: 如果元素有滚动条，计算宽高时，需要减掉滚动条的宽度，17px
scroll 滚动偏移属性
● scrollLeft/scrollTop 盒子内部滚动出去的尺寸
● 元素出现滚动条之后，内部滚动出去的尺寸左侧的值和顶部的值
● 这里元素的内部包括自身的 padding，子元素的 margin、border、padding、content
● 这里滚动参考的是父元素边框内侧
● scrollWidth/scrollHeight 盒子内容的宽度和高度
● 这里的宽高不计算父元素的 border
● 父元素会被子元素撑宽，和撑高
● 撑开父元素的子元素本身，会把margin、border、padding、content都计算在内
● 父元素如果有 padding 值，垂直方向会计算在内，水平方向右边 padding 不计算在内
● scrollWidth/scrollHeight 表示的就是最后被子元素撑开之后，父元素的宽高
offset 偏移量属性(只读)
● offsetParent 偏移参考父级，距离自己最近的有定位的父级，如果都没有定位参考body(html)
● offset 指的是偏移量
● 任何元素都有一个 offsetParent 属性
● 任何元素天生就知道自己的参考父级是谁
● 类似绝对定位需要参考的那个相对定位(子绝父相)
● offsetLeft/offsetTop 偏移位置
● 自身的边框以外(其实就是元素边框以外的左上顶点)与参考父级边框以内左上角之间的距离
● offsetLeft/offsetTop 类似绝对定位的 left 值和 top 值
● offsetWidth/offsetHeight 偏移大小
● 与自身的高度/宽度有关(只关心自己的东西，其他与我无关)
● 指的是元素边框及以内的宽度和高度(就是元素的border、padding、content加起来的宽度和高度)
● 这里偏移大小，偏移宽度，并不是指偏移的距离，而是发生偏移的那个元素，本身自己的大小而已
● offsetWidth/offsetHeight 类似与绝对定位的元素的宽高大小
var getOffset = {
left: function (element) {
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current) {
actualLeft += current.offsetLeft+current.clientLeft;
current = current.offsetParent;
}
return actualLeft;
},
top: function (element) {
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current) {
actualTop += current.offsetTop+current.clientTop;
current = current.offsetParent;
}
return actualTop;
}
}
offsetLeft和offsetTop确实是存在一定误差的，相关因素如下：
1 修改元素的offsetParent
2 修改offetParent的盒模型（如果offsetParent设置了边框和内边距的话）
3 current.clientLeft/clientTop
4 screenX和screenY
参考点：电脑屏幕左上角
●screenX：鼠标点击位置相对于电脑屏幕左上角的水平偏移量
●screenY：鼠标点击位置相对于电脑屏幕左上角的垂直偏移量
2clientX和clientY
参考点：浏览器内容区域左上角
●clientX：鼠标点击位置相对于浏览器可视区域的水平偏移量（不会计算水平滚动条的距离）
●clientY：鼠标点击位置相对于浏览器可视区域的垂直偏移量（不会计算垂直滚动条的距离）
3pageX和pageY
参考点：网页的左上角
●pageX：鼠标点击位置相对于网页左上角的水平偏移量，也就是clientX加上水平滚动条的距离
●pageY：鼠标点击位置相对于网页左上角的垂直偏移量，也就是clientY加上垂直滚动条的距离
4offsetX和offsetY
参考点：触发事件对象
●offsetX：鼠标点击位置相对于触发事件对象的水平距离
●offsetY：鼠标点击位置相对于触发事件对象的垂直距离
