要弄清的问题
通过搭配可以组合出很多种属性，本文就是介绍如何区分这些属性。
前缀
- offset
- client
- scroll
- *screen
- *page
后缀
- Width, Height
- Left, Top
- X, Y
offset 相关
offsetWidth、offsetHeight
只读属性，代表了元素的布局宽度和布局高度，包含了以下：
- width/height
- border(边框)
- padding(内边距)
- scrollbar(如果存在滚动条，并且被渲染)
offsetParent
只读属性，指向最近的包含该元素的定位元素。
定位元素是指含有 position: absolute/relative 。
- 若有定位元素则返回该元素；
- 若没有定位元素，返回最近的
table,table cell或根元素body； - 当元素的
style.display设置为none时，offsetParent 返回null。
offsetLeft、offsetTop
只读属性，返回当前元素左上角相对于 HTMLElement.offsetParent 节点的上、左边界偏移的像素值，包含以下：
offsetParent的padding- 中间元素的
width/height - 自身的
margin
client 相关
clientWidth、clientHeight
元素的内部宽度、高度。该属性包含以下：
- width/height
- padding(内边距)
不包括垂直滚动条（如果有）、边框和外边距。
clientLeft、clientTop
只读属性，一个元素顶部边框的宽度、高度，包含：
- border(边框)
scroll 相关
scrollWidth、scrollHeight
只读属性，若元素的宽度、高度大于其内容的区域（例如，元素存在滚动条时）, scrollWidth/scrollHeight 的值要大于 clientWidth/clientHeight，包含以下：
- 溢出部分
- clientWidth/clientHeight
scrollLeft、scrollTop
可读写，一个元素的 scrollLeft、scrollTop 是可以去计算出这个元素最高高度、宽度距离它容器顶部、右边的可见高度。
- 元素的滚动条的位置；
- 当没有产生垂直方向的滚动条,那它的
scrollTop的值默认为 0； - 通过设置它们来让元素中的内容滚动。
screen, page, X/Y 相关
带有 X/Y 后缀的属性都是 MouseEvent 的独有属性，用于鼠标事件。
offsetX、offsetY
设置或获取，鼠标指针位置相对于触发事件的对象的 X/Y 坐标。
clientX、clientY
设置或获取，鼠标指针位置相对于当前窗口的 X/Y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
screenX、screenY
设置或获取，鼠标指针位置相对于用户屏幕的 X/Y 坐标。
pageX、pageY
获取，鼠标指针位置相对于整个文档的 X/Y 坐标。仅支持到 IE9。
区别：style.top 和 offsetTop
- offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px 。
- offsetTop 只读，而 style.top 可读写。
- 如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。
表格快速查询
简化说明：
- width 包含 height
- left 包含 top
| 属性 | offsetWidth | clientWidth | scrollWidth | offsetLeft | clientLeft | scrollLeft |
|---|---|---|---|---|---|---|
| width | √ | √ | √ | √ | ||
| border | √ | √ | ||||
| padding | √ | √ | √ | |||
| scrollbar | √ | |||||
| margin | √ | |||||
| 溢出部分 | √ | |||||
| offsetParent 的 padding | √ | |||||
| 是否读写 | 只读 | 只读 | 只读 | 只读 | 只读 | 可读写 |