记录 offset、client、scroll、event 家族中用来获取 dom 元素的各个属性以及差异。
offset 家族
口诀：获取元素自身的真实位置。
| 属性 | 说明 |
|---|---|
| offsetWidth / offsetHeight | 获取元素完整的宽高（包含 padding + border） |
| offsetParent | 获取元素最近的定位父级 |
| offsetLeft / offsetTop | 获取元素外边框到定位父级内边框的距离 |
其中，offsetParent 是指：
- 如果元素自身为固定定位，则定位父级为 null；
- 如果元素自身为非固定定位，并且所有父级也都没有定位，此时定位父级为 body；
- body 自身的定位父级为 null。
client 家族
口诀：获取内容可视区域（视口）的真实宽高。
| 属性 | 说明 |
|---|---|
| clientWidth / clientHeight | 元素的内部宽高（含 padding，不含margin、border、滚动条） |
| clientLeft / clientTop | 表示一个元素的左边（顶部）边框的宽度 |
注意：内联元素以及没有 CSS 样式的元素的 clientWidth属性值为 0。
scroll 家族
口诀：获取元素里内容的真实宽高，以及内容到元素间的滚动位置距离。
| 属性 | 说明 |
|---|---|
| scrollWidth / scrollHeight | 获取元素里内容的真实宽高 |
| scrollTop | 获取或设置元素的内容垂直滚动的像素数。 |
| scrollLeft | 获取或设置元素滚动条到元素左边的距离。 |
相关链接：如何让子元素滚动到指定父窗口的指定位置
事件对象家族
事件触发时，浏览器会捕捉与事件相关的信息。其中，有三大坐标系：screen、client、page。
具体属性如下：
| 属性 | 说明 |
|---|---|
| e.screenX(Y) | 触发点到电脑屏幕左 / 上的距离 |
| e.clientX(Y) | 触发点到页面可视区域左 / 上的距离 |
| e.pageX(Y) | 触发点相对于页面(body) 左 / 上的距离（包括了被卷去的body部分的长度） |
其中，区分 clientX(Y) 和 pageX(Y) 主要看窗口的拖动对数值的影响，clientX(Y) 会随着窗口拖动的变化而变化，pageX(Y) 固定值，与窗口拖动无关。
getBoundingClientRect
Element.getBoundingClientRect()，一个超级好用的方法。 返回元素的大小及其相对于视口的位置。
const dom = document.getElementById('app')
const info = dom.getBoundingClientRect()
// output =>
{
bottom: 148.3125
height: 500
left: 221.6374969482422
right: 721.6374969482422
top: -351.6875
width: 500
x: 221.6374969482422
y: -351.6875
}
box-sizing 中的属性值
补充一下 CSS 属性 box-sizing 的值，它们对应的 DOM 数值又是什么呢？
box-sizing:content-box: 元素的尺寸等于width/height + padding + border-width的总和。
box-sizing: border-box: 元素的的尺寸等于 width/height。
