clientWidth/clientHeight返回可视区域尺寸（内容+padding-滚动条），不含边框和滚动条；offsetWidth/offsetHeight含内容、padding、border及滚动条，反映实际占位；scrollWidth/scrollHeight含内容全尺寸（含溢出部分）及padding，用于判断溢出。
clientWidth 和 clientHeight 是最常用、最稳妥的起点，但它们只返回“可见区域”的尺寸，不包含边框和滚动条——如果你要算布局占位或做动画基准，很可能得换别的属性。
什么时候用 offsetWidth / offsetHeight
当你需要元素在页面中实际占据的物理空间（含内边距 + 边框），且不关心是否被隐藏或溢出时，就用这两个。
- 值是整数，四舍五入到像素，不带单位
- 如果元素或任意祖先
display: none，返回0 - 会包含水平/垂直滚动条（如果渲染出来了），但不包括
margin - 对
<body>的行为在 IE 和现代浏览器中不一致，慎用于跨浏览器 body 尺寸计算
什么时候用 scrollWidth / scrollHeight
当你需要知道“内容全展开”所需的最小尺寸（比如判断是否发生了横向溢出、实现滚动到底部逻辑），就看这两个。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 即使内容没溢出，
scrollWidth也 ≥clientWidth；相等说明没横向滚动必要 - 包含伪元素（如
::before）的宽度，但不含边框、外边距、滚动条本身 - 只读，且在元素不可见时仍可能返回有效值（比
offsetWidth更“诚实”） - 注意：若父容器
overflow: hidden但子内容撑开，scrollWidth仍反映子内容总宽
为什么 getBoundingClientRect().width 有时更准
它返回的是元素盒子相对于视口的几何尺寸，是 CSS 布局计算后的最终结果，不受 transform 缩放影响（除非你显式传参），而且能处理 sub-pixel 值（返回浮点数）。
立即学习“前端免费学习笔记（深入）”；
- 包含
border和padding，但不包含margin - 当元素有
transform: scale(0.5)时，offsetWidth还是原始像素值，而getBoundingClientRect().width是缩放后的真实渲染宽度 - 如果元素不在文档流中（比如
position: absolute且父级未设position），它的left/right可能为0，但width/height依然可靠 - 调用开销略高，频繁读取需防 layout thrashing，建议缓存结果
真正容易被忽略的点是：这些属性在元素尚未渲染完成（比如刚 appendChild 但还没触发重排）时可能返回 0 或旧值。需要确保 DOM 已就绪，必要时用 requestAnimationFrame 或 offsetParent !== null 做兜底判断。
