css盒模型与动态布局调整_如何通过JavaScript修改尺寸_技术教程

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），但来源和用途不同：

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 是否如你所想。