getBoundingClientRect() 返回元素在视口中的实际像素占据量（含 transform、高 DPI 小数等），包含 content+padding+border，不含 margin；而 style.width 或 getComputedStyle().width 仅反映 CSS 声明值，不体现最终渲染结果。
getBoundingClientRect() 是唯一能拿到真实渲染尺寸（含 transform、高 DPI 小数、滚动条占位）的 JS API；但 CSS 本身无法“读取”这个值，必须靠 JS 注入 css custom property 才能在样式中复用。
为什么 getBoundingClientRect().width 不等于你写的 width？
因为 getBoundingClientRect() 返回的是元素在视口中的**实际像素占据量**，它包含 content + padding + border，但不含 margin；如果元素有 transform: scale(0.5)，它返回缩放后的尺寸，不是原始声明值。而 style.width 或 getComputedStyle(el).width 只反映 CSS 声明或计算值，不反映最终渲染结果。
- display: none 的元素调用会返回全 0，
visibility: hidden不影响结果 - 元素未挂载到 DOM 或处于 documentFragment 中时，结果不可靠
- 在
requestAnimationFrame回调里取值，比直接写在脚本末尾更稳妥
如何把 getBoundingClientRect 结果安全注入 CSS 变量？
不能直接写 document.documentElement.style.setProperty('--el-width', rect.width)，因为 rect.width 是 number，CSS 变量需要带单位。漏掉 px 会导致后续 calc(var(--el-width) * 2) 失效。
- 务必显式转字符串并拼单位：
`${rect.width}px` - 注入目标选
document.documentElement（全局变量）或el.style（作用域变量），避免污染其他组件 - 如果元素宽高频繁变化（如富文本编辑器），需配合
MutationObserver+ 节流，不能只靠resize事件
哪些 CSS 场景能用这个变量？哪些不能？
可以用于 min-height、padding-bottom、伪元素 ::before 尺寸、transition 动画起止值；但不能用于 height 或 width 属性本身做等高布局——这会触发“样式 → 布局 → 样式”循环，浏览器可能丢弃更新或报 warning。
- ✅ 安全用法：
min-height: var(--content-height)、clip-path: inset(0 0 calc(100% - var(--content-height)) 0) - ❌ 危险用法：
height: var(--content-height)（除非你确认该元素无其他 height 干扰且不参与 flex/grid 主轴计算） - ⚠️ 注意：变量值变更后，需确保触发重排（如改 class 或强制
el.offsetHeight），否则 transition 不会启动
最易被忽略的一点：动态内容高度计算不是“测一次就完事”。哪怕用了 ResizeObserver，遇到字体加载、图片懒加载、webfont 渲染完成等异步时机，仍可能需要二次测量——别假设 DOM 更新和视觉渲染是原子操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
