必须用 cssunitvalue 实例（如 css.px(100)）才能启用 typed om 类型计算，字符串赋值不触发单位解析；加减乘除需用 cssmathsum 等构造函数，computedstylemap 值只读不可修改。
attributeStyleMap.set 传 CSSUnitValue 才算真正启用类型计算
直接写 element.style.width = '100px' 或用字符串调 attributeStyleMap.set('width', '100px') 都不会触发 Typed OM 的单位计算能力——值会静默转为字符串，后续无法做加减、单位换算。必须显式构造 CSSUnitValue 实例，比如 CSS.px(100)、CSS.em(1.5)，才能让浏览器识别为可运算的类型化值。
常见错误现象：attributeStyleMap.set('width', '100px') 看似生效，但 attributeStyleMap.get('width').value 是 undefined，.unit 也是 undefined；而用 CSS.px(100) 后，.value 是数字 100，.unit 是字符串 "px"。
-
CSS.px(100)、CSS.percent(80)、CSS.ms(200)是最常用构造方式，单位名必须严格匹配（如不能写CSS.millisecond(200)） - 不支持复合单位（如
calc(100px - 2em)），也不能传带单位的字符串（"100px"） - 注意 Safari 15.4+、Chrome 85+、Edge 85+ 原生支持；Firefox 目前仍需 polyfill（如
css-typed-om）
用 CSSUnitValue.value 和 CSSUnitValue.unit 拆解并安全转换单位
CSSUnitValue 实例不是“原始数字”，它把数值和单位分开放在 .value 和 .unit 两个属性里。这意味着你不能直接拿它参与算术，必须先确认单位是否兼容——比如 px 和 em 不能直接相加，但 px 和 rem 在已知根字体大小时可通过计算对齐。
典型使用场景：动态调整尺寸时保持比例，或响应式缩放中统一转为视口单位。
- 获取当前值：
const w = element.attributeStyleMap.get('width');，再判断w instanceof CSSUnitValue才能安全访问.value - 单位一致性检查：
w.unit === 'px'成立才可与另一个px值相加；否则需手动换算（例如查getComputedStyle获取font-size再算em → px） - 不要依赖
.toString()——它返回类似"100px"的字符串，丢失类型信息，也破坏后续计算链
加减乘除必须用 CSSMathValue，不能直接用 + - * /
CSSUnitValue 本身不支持 + 或 * 运算符。想做 100px + 2em 或 50% * 2，必须用 CSSMathSum、CSSMathProduct 等构造函数包装，最终再塞回 attributeStyleMap.set。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
错误做法：const a = CSS.px(100); const b = CSS.em(2); const sum = a.value + b.value; ——这纯属数字相加，完全忽略单位语义，结果毫无意义。
- 正确加法：
CSSMathSum(CSS.px(100), CSS.em(2)) - 正确乘法：
CSSMathProduct(CSS.percent(50), CSS.number(2))（注意CSS.number(2)不是数字2） - 所有
CSSMath*构造结果仍是类型化对象，可继续参与下一轮计算，也能被浏览器原生解析为calc()表达式 - 不支持除法直接写
/，要用CSSMathProduct(val, CSS.number(1 / x))
computedStyleMap 返回的 CSSUnitValue 是只读的，别试图 set
element.computedStyleMap().get('width') 返回的 CSSUnitValue 是只读快照，它的 .value 和 .unit 可读，但调 .set() 会报 TypeError: Cannot set property。这是设计使然——它只用于观察，不用于修改。
容易踩的坑：拿到 computed 值后想“顺手改一下再设回去”，结果发现没反应或报错。必须用 attributeStyleMap 或 CSS 变量（--my-width）配合 @property 注册来实现可变样式。
- 读取用
computedStyleMap，写入用attributeStyleMap，二者职责分明 - 若需基于 computed 值做运算后再写入，先解构出
.value和.unit，构造新CSSUnitValue或CSSMathValue，再set - 注意
computedStyleMap不支持简写属性（margin），必须用marginTop、marginBottom等长名
Typed OM 的单位计算不是“自动聪明”，它把类型和单位显式暴露出来，意味着你得自己决定何时换算、何时禁止混用。最常被忽略的一点：没有运行时单位自动归一化——px 加 rem 不会自动转成同一单位，它要么报错，要么生成一个 calc() 表达式交由 CSS 引擎处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
