我们借助万能的 stackoverflow 找到了 MDN 上的解释。
元素占据了多大的空间？
通常情况下我们想要知道元素可见时占据的空间，可以使用 HTMLElement.offsetWidth 和 HTMLElement.offsetHeight。大多数情况和 Element.getBoundingClientRect() 获取到的值是一样的。
元素中有 transform 的样式时，HTMLElement.offsetWidth 和 HTMLElement.offsetHeight 返回的是实际布局计算出的宽高，即排除 transform 作用的值。而 Element.getBoundingClientRect() 获取到的是实际渲染的宽高。举个栗子，如果元素的宽度为 100px;transform(scale(0.5)); Element.getBoundingClientRect() 将返回 50 作为宽度，而 HTMLElement.offsetWidth 将返回 100。
也就解答了排查线上问题时的疑惑，文档还没完，再接着看看。
这里还有一个小的差异，HTMLElement.offsetWidth 和 HTMLElement.offsetHeight 返回的是整数，并且在 Windows 上并没有像规范说明的四舍五入，而是始终向下取整。而 Element.getBoundingClientRect() 返回的是小数，这在一些对精度要求较高的场景下会有用。
展示出的内容部分的大小是多少？
如果需要知道实际显示的内容占用多少空间(包括 padding 但不包括 border、margin 或 scrollbar)，可以使用 Element.clientWidth 和 Element.clientHeight 属性。
内容区总共有多大？
如果需要知道内容的实际大小，而不管当前有多少内容是可见的，可以使用 Element.scrollWidth 和 Element.scrollHeight 属性。它们会返回元素包含滚动条时不可见区域的整个内容的宽度和高度。
