在前端开发中，控制元素的位置和尺寸是实现复杂布局、动画、拖拽、懒加载等功能的基础。浏览器提供了一系列属性和方法帮助我们获取这些几何信息，理解它们之间的区别和适用场景至关重要。
13.4.1 偏移量（Offset）
偏移量相关属性衡量的是元素相对于其最近的定位祖先元素（position 非 static）的位置和元素自身的整体尺寸（包含边框、内边距和滚动条）。
offsetWidth/offsetHeight：元素占据的完整尺寸，包括内容、内边距和边框，不包括外边距。如果元素隐藏（display: none），值为 0。offsetLeft/offsetTop：元素左上角相对于其offsetParent（最近的定位祖先元素）的左侧和顶部距离。
实用示例
获取某个元素在页面上的“绝对位置”需要递归累加 offsetLeft/offsetTop，直到根元素。现代开发中更推荐使用 getBoundingClientRect() 一次性获取。
13.4.2 客户区尺寸（Client）
客户区尺寸反映的是元素内容区 + 内边距所占用的空间，不包含边框、外边距和滚动条（但包含滚动条占用的空间会从内容宽度中减去）。
clientWidth/clientHeight：内容宽度/高度 + 内边距（不包含边框）。clientLeft/clientTop：元素的左边框和上边框的宽度，其实就是边框大小。
应用场景
常用于获取可视区域的尺寸，例如判断元素是否进入视口、计算容器内可用的布局空间。
13.4.3 滚动尺寸（Scroll）
滚动尺寸关注的是元素实际内容的总大小以及当前滚动的距离。
scrollWidth/scrollHeight：元素内容的总宽高，包括因溢出而不可见的部分。对于无滚动内容的元素，等同于clientWidth/clientHeight。scrollLeft/scrollTop：元素内部已经滚动的距离，可读写。设置这些属性可以控制滚动位置，实现回到顶部、平滑滚动等效果。
典型运用
监听 scroll 事件，配合 scrollTop 和 clientHeight 可以实现滚动加载更多、滚动进度条等功能。
13.4.4 元素坐标获取
getBoundingClientRect()
返回一个 DOMRect 对象，包含 left、top、right、bottom、width、height，这些值都是相对于视口（viewport）的坐标。它是获取元素当前位置最直观、最常用的方法，并且获取的是元素经过 CSS 变换后的实际视觉位置。
elementFromPoint(x, y)
根据视口坐标获取该点最上层的元素，常用于碰撞检测、点击穿透模拟等。
getClientRects()
返回一个 DOMRect 集合，主要用于内联元素分行后的多个矩形框，较少在常规业务中使用。
13.4.5 性能提示
读取这些尺寸属性时，浏览器通常需要计算最新的布局，因此频繁读取可能触发强制同步布局（强制回流），导致性能下降。最佳实践是：
- 批量读取，避免在修改样式后立即读取（读写交替会导致多次回流）。
- 使用
requestAnimationFrame协调动画和布局的读取。 - 缓存频繁使用的尺寸值，减少重复计算。
掌握了这些尺寸和位置 API，你就能够精确控制元素在页面上的表现，应对绝大多数交互和动画需求。