box-sizing 默认 content-box 是布局偏差主因，应全局设为 border-box；getBoundingClientRect() 返回真实像素但需确保布局完成；offsetWidth 等属性测量逻辑不同，不可混用；flex/grid 下子项尺寸由容器算法决定，传统公式失效。
box-sizing 不是万能的，但不设它一定出错
绝大多数布局偏差，根源在 box-sizing 默认值是 content-box。这意味着你写的 width: 200px 只算内容区，padding 和 border 会额外加出去——实际占宽可能是 200 + 20 + 2 = 222px（假设左右 padding 各 10px、border 各 1px）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局重置：在
:root或*::before里统一设box-sizing: border-box，再用* { box-sizing: inherit }保证继承 - 只对特定组件临时切回
content-box（比如需要精确控制内边距溢出的 canvas 容器） - 别依赖浏览器默认，哪怕文档声明“现代浏览器已优化”，DOM 实际渲染仍按规范走老规则
getBoundingClientRect() 返回的是真实像素，但要注意触发时机
getBoundingClientRect() 是唯一能拿到渲染后真实尺寸的 API，但它返回的数值受布局是否完成影响。常见错误是 DOM 插入后立刻调用，结果拿到的是未计算样式或未触发 layout 的旧值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保元素已挂载且样式已计算：用
requestAnimationFrame包一层再取值 - 避免在
resize事件中高频调用——它本身就会触发重排，叠加调用易导致卡顿 - 注意缩放（
transform: scale()）和设备像素比（window.devicePixelRatio）：该方法返回的是 CSS 像素，不是物理像素；若需设备级精度，得手动乘devicePixelRatio
offsetWidth / clientWidth 这些属性为什么经常对不上
offsetWidth、clientWidth、scrollWidth 看似都是“宽度”，但计算逻辑完全不同：offsetWidth 包含 border，clientWidth 排除 border 和 scrollbar，scrollWidth 还计入溢出内容。它们都不是“盒模型公式推导”出来的，而是浏览器测量 DOM 节点后直接上报的快照值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 要算“理论占用空间”，必须手写公式：
width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right（注意：margin 不影响父容器内占用，但影响兄弟元素间距） - 不要混用测量值和计算值做比较——比如用
clientWidth和你手算的width + padding对齐，必然失败，因为前者不含 border，后者含 - 遇到
display: inline元素，这些属性全失效，必须先getComputedStyle查display类型再决定是否强制转 block
flex/grid 容器下子项尺寸不再服从传统盒模型公式
一旦父元素设了 display: flex 或 grid，子项的最终尺寸由弹性算法或网格轨道分配决定，width 只是初始参考值，可能被压缩、拉伸甚至忽略。这时候套用传统公式（如 width + padding + border）会完全失真。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 查子项实际渲染宽高，优先用
getBoundingClientRect()，而不是读offsetWidth - 调试时打开浏览器开发者工具的“Layout”面板，看“Computed”里的
flex-basis、flex-grow、grid-column-start/end等字段，它们才是真实起效的参数 - 如果必须预估尺寸，得把父容器的
flex-wrap、justify-content、gap全部纳入计算，且要考虑最小/最大尺寸限制（min-width、max-width）是否触发
盒模型公式只在普通流（normal flow）下严格成立；只要牵扯到 flex、grid、float、position: absolute，就得切换成“测量优先、推导辅助”的思路。最常被忽略的，是父容器 display 类型对子项尺寸解释权的彻底剥夺。
