JavaScript 中存在许多属性让我们能够读取元素的宽度、高度或其他具有几何特征的信息。
在移动或定位 JavaScript 元素时，我们经常需要它们来计算元素的坐标。
几何学
元素有宽度，高度和其他几何属性，它们的值为数字。
如下预览图，假设单位为像素(pixels)。
图中是比较复杂的情况，包含内边距(padding)，边框(border)，和滚动条(scrollbar)。外边距(margin)不属于元素本身，在此不作讨论。
offsetParent, offsetTop/Left
offsetParent 是最近的祖先元素，满足的条件为：
- CSS 定位（
position为relative,absolute,fixed或sticky） - 或者为
<td>,<th>,<table>,<body>
offsetLeft 和 offsetTop 分别为元素左上角距离 offsetParent 的横坐标(x)和纵坐标(y)。
有以下情况 offsetParent 的值为 null：
- 元素是不展示的（
display为none或不存在文档中） - 元素为
<html>或<body> - 元素的定位是
fixed
offsetWidth/Height
元素最外层的宽度或高度，包含边框。
offsetWidth，通过CSS-width + paddings + borders计算获得offsetHeight，最外层高度
clientLeft/Top
元素左上角外部到内部的距离，在文档从左至右渲染的系统中，获取的是左边和顶部 边框的宽度。
在一些从右至左渲染文档的操作系统中，滚动条出现在左边，此时 clientLeft 会包含滚动条的宽度。
clientWidth/Height
获取元素边框内的宽度和高度，不包括滚动条(scrollbar)。
在没有滚动条情况下，和 css-width 是相等的。
这样可以通过 getComputedStyle(el).width - el.clientWidth 获取滚动条的宽度。
scrollWidth/Height
clientWidth 和 clientHeight 获取的是元素可视范围内的宽度和高度。
scrollWidth 和 scrollHeight 包含滚出的宽度和高度。
scrollTop/Left
获取元素隐藏，滚出部分的高度和宽度。
注意：大部分几何属性是只读，但这两个属性可以修改，使元素相对移动一定距离。
尽量不从样式中获取元素宽度和高度
getComputedStyle 方法可以获取元素的宽度和高度，但是它受如下因素影响：
- 容易受 CSS 的
box-sizing属性影响 - 内连元素返回的值为
auto - Firefox 浏览器中不会减去滚动条的宽度
clientWidth 属性总是相同的，它会减去滚动条的宽度。
