box-sizing 默认为 content-box 会导致 JavaScript 设置 width 失效；推荐全局设为 border-box；offsetWidth、clientWidth、getBoundingClientRect() 尺寸含义不同，动态布局应优先用后者。
box-sizing 属性不设对，JavaScript 改尺寸会“失效”
很多开发者调用 element.style.width = '200px' 后发现元素没变宽，其实是 box-sizing 默认为 content-box，而父容器或 CSS 里写了 padding 或 border，导致实际占位超出预期。改尺寸前必须确认盒模型行为是否和你预期一致。
推荐统一设为 border-box，这样 width 指的是“总宽度”，含 padding 和 border：
*, *::before, *::after {
box-sizing: border-box;
}
否则用 JavaScript 获取尺寸时，offsetWidth 和 clientWidth 的含义差异会直接导致计算错误。
用 offsetWidth / clientWidth / getBoundingClientRect() 的区别
三者返回的数值单位都是像素（number），但来源和用途不同：
立即学习“Java免费学习笔记（深入）”；
-
offsetWidth：包含 border + padding + content，四舍五入到整数，受display和visibility影响（display: none时为 0） -
clientWidth：只含 padding + content，不含 border、滚动条，也不四舍五入，但会忽略overflow: hidden外溢内容 -
getBoundingClientRect()：返回对象，width和height是浮点精度，且基于视口坐标系，适合做精确动态定位（比如拖拽、跟随鼠标）
动态调整尺寸时优先用 getBoundingClientRect()，尤其涉及缩放（transform: scale()）或高 DPI 屏幕时，offsetWidth 会丢失小数精度。
修改 width/height 时 style 和 class 切换哪个更稳？
直接操作 element.style.width 简单，但容易被 CSS 优先级覆盖（比如 !important 或更具体的选择器），也难维护。用 class 切换更可控：
.size-small { width: 120px; height: 40px; }
.size-medium { width: 200px; height: 60px; }
.size-large { width: 300px; height: 80px; }
然后用 JavaScript 控制：
element.classList.remove('size-small', 'size-medium');
element.classList.add('size-large');
注意两点：
- 如果 class 中用了
max-width或min-height，它们会和width/height共同起作用，需一并检查 - 动画过渡要加在 class 里（
transition: width 0.2s, height 0.2s），而不是靠 JS 插帧——浏览器对 CSS transition 的优化远好于requestAnimationFrame手动更新style
resizeObserver 代替 window.onresize 更精准
监听窗口大小变化用 window.addEventListener('resize', ...) 很常见，但它只响应 viewport 变化，无法感知元素内部尺寸变动（比如子元素增删、字体加载完成、图片加载后撑开容器）。这时候要用 ResizeObserver：
const ro = new ResizeObserver(entries => {
for (let entry of entries) {
console.log('新尺寸：', entry.contentRect.width, entry.contentRect.height);
// 这里可触发重布局、重绘逻辑
}
});
ro.observe(document.querySelector('.dynamic-panel'));
注意：
-
ResizeObserver不支持 IE，需要resize-observer-polyfill（但 polyfill 仅模拟contentRect，不支持子元素变化的深度监听） - 它回调中拿到的
contentRect是 layout 后的尺寸，比getBoundingClientRect()更可靠（后者可能取到未重排前的缓存值） - 避免在回调里直接修改被观察元素的尺寸，否则可能触发无限循环（需加节流或标记位）
盒模型理解偏差和尺寸读写时机错配，是动态布局中最隐蔽的 bug 来源。别只盯着 JS 代码，先看 computed styles 里的 box-sizing、display、position 是否如你所想。
