JavaScript client、offset、scroll的 width与height 和 left与top，以及浏览器窗口尺寸的获取

长度和尺寸

client

clientWidth和clientHeight

元素的 内容 + 左右padding 区域的尺寸
display: none;   之后为0

clientLeft和clientTop

左/上 边框的宽度

---

offset

offsetParent

语法：元素a.offsetParent
返回值：元素a的父级元素
意思是元素a是相对于谁来计算偏移量的

offsetWidth和offsetHeight

元素的 内容　+ 左右padding + 左右border 区域的尺寸
display: none;   之后为0

offsetLeft和offsetTop

当前元素上/左边框外边缘到到父级元素(offsetParent)的上/左边框内边缘的距离

当计算使用了right和bottom定位的元素时，会自动转换成left和top

---

scroll

scrollWidth和scrollTop

指定元素的实际宽/高，即可视区域长度 + 隐藏区域的长度

scrollLeft和scrollTop

浏览器卷起的高度和宽度
网页向下/右滚动之后，页面上/左方隐藏的长度

扩展：
一般，网页都存在DOCTYPE标签，我们使用document.documentElement.scrollTop/scrollLeft获取
在网页不存在DOCTYPE的情况下，我们使用document.body.scrollTop/scrollLeft获取
为了兼容没有DOCTYPE的情况，我们使用短路表达式来兼容
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft

---

浏览器窗口尺寸

BOM级别获取

window.innerWidth 
window.innerHeight
获取到的时包含滚动条的尺寸

DOM级别的获取

document.documentElement.clientWidth
document.documentElement.clientHeight
获取的页面不包含滚动条的尺寸