css变量驱动width/height必须带单位，--width: 200无效，应写--width: 200px；calc中变量参与运算需空格规范；ie不支持var()，无运行时降级。
用 --width 和 --height 直接控制 width / height 会失效？
直接写 width: var(--width); 看似合理，但若 --width 的值没带单位（比如只设 style="--width: 200"），CSS 会报错或忽略——CSS 变量不自动补单位，200 不是合法的长度值。
必须确保变量值自带单位，或在使用时拼接。推荐前者：统一在定义时带上单位，避免下游反复处理。
- ✅ 正确：
element.style.setProperty('--width', '200px');或 HTML 中style="--width: 200px; --height: 150px;" - ❌ 危险：
style="--width: 200;"+width: var(--width) px;（CSS 不支持这种拼接） - ⚠️ 替代方案（少用）：
width: calc(var(--width-num) * 1px);，但增加冗余且易出错
padding、margin、border-width 能否也用变量驱动？
可以，但要注意继承与重置行为。比如 padding 是简写属性，若只改 --padding 变量却漏了 padding-block 或 padding-inline 的兼容写法，在 Safari 旧版可能回退为初始值。
更稳妥的做法是：对需动态控制的盒模型属性，显式使用逻辑属性或标准简写，并确保变量始终含单位。
- ✅ 推荐：
padding: var(--padding);配合style="--padding: 12px 24px;" - ✅ 响应式友好：
margin-block-start: var(--mt);+element.style.setProperty('--mt', '8px'); - ❌ 避免混用：
border: var(--border-width) solid #ccc;—— 因为border是复合声明，--border-width只能替换宽度部分，但语法上不允许拆开写
JavaScript 更新变量后尺寸没变化？检查是否触发了重排（reflow）
CSS 变量更新本身是异步的，但浏览器通常会在下一帧渲染前合并样式变更。如果 JS 连续多次调用 setProperty，或在读取 offsetWidth 后立刻修改变量，可能因强制同步计算导致卡顿或尺寸未及时反映。
- ✅ 安全更新：
el.style.setProperty('--width', `${newWidth}px`);单次调用即可，无需手动el.offsetWidth触发重排 - ⚠️ 潜在陷阱：在
requestAnimationFrame外频繁读写（如循环中查clientHeight再设变量），可能引发布局抖动 - ? 调试技巧：Chrome DevTools → Rendering → 勾选 "Layout Shift Regions"，观察尺寸变更是否真实生效
IE 不支持 CSS 变量，但项目必须兼容怎么办？
IE11 及更早版本完全忽略 var()，且无降级机制。不能靠 var(--w, 200px) 回退——IE 连这个语法都解析失败，整条声明被丢弃。
真要兼容 IE，必须放弃纯 CSS 变量方案，改用 class 切换或 JS 注入 style 标签。但注意：class 方案需预设所有可能尺寸组合（如 .w-200.h-150），丧失“任意值”动态性。
- ✅ 折中方案：用 PostCSS 插件（如
postcss-css-variables）构建时静态替换，生成带 fallback 的 CSS（仅适用于变量值固定、不 runtime 更新的场景） - ❌ 不可行：
@supports (width: var(--w)) { ... }在 IE 下无效，因为 @supports 本身也不被支持 - ? 关键判断点：如果业务要求“用户拖拽实时缩放盒子”，IE 兼容就只能用 JS 直接操作
el.style.width，绕过 CSS 变量
CSS 变量驱动盒模型的核心约束很实在：单位必须显式、更新必须带单位字符串、IE 无法 runtime 降级。很多“看似灵活”的写法，其实卡在单位拼接或浏览器解析边界上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
