行内style属性需严格遵循“属性: 值;”格式，短横线命名，优先级高于外部样式但低于!important；动态修改应使用setProperty或驼峰赋值，避免字符串拼接或setAttribute。
直接用 style 属性写 CSS 声明是最简单、最优先生效的行内样式控制方式，但必须注意语法格式和覆盖逻辑，否则样式会静默失效。
style 属性值必须是合法的 CSS 声明列表
不是任意字符串都能被浏览器识别为样式。它必须符合「属性: 值;」的格式，多个声明用英文分号分隔，末尾分号可省略但建议保留。
-
style="color: red; font-size: 14px;"✅ 正确 -
style="color: red, font-size: 14px"❌ 逗号分隔 → 整个值被忽略 -
style="color=red"❌ 等号代替冒号 → 无效 -
style="display: flex; justify-content: center"✅ 注意：CSS 属性名始终用短横线（kebab-case），不支持驼峰（如justifyContent）
style 会覆盖所有外部和内部样式，但无法覆盖带 !important 的规则
行内 style 的优先级高于 <style> 块和外部 CSS 文件中的同名规则，这是 CSS 特异性（specificity）决定的。但它依然输给显式声明的 !important。
-
<p style="color: blue">文本</p>→ 蓝色，即使外部有p { color: green; } - 但如果外部写了
p { color: green !important; }→ 最终显示绿色 - 想强行覆盖
!important？只能用 JS 动态设置element.style.color = "blue"并加!important（需通过cssText或setProperty实现，原生style属性不支持）
动态修改 style 需避免字符串拼接，优先用 CSSOM API
在 JS 中反复拼接 style 字符串（如 el.style = "top:" + y + "px; left:" + x + "px;"）容易出错、难维护，且会清空之前所有行内样式。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐用
element.style.setProperty("top", y + "px")—— 只改单个属性，不影响其他 - ✅ 或直接赋值
element.style.top = y + "px"（注意驼峰命名，background-color→backgroundColor） - ❌ 避免
element.setAttribute("style", "...")，它会完全替换整个style值，丢失历史设置 - ⚠️ 注意：某些 CSS 属性在 JS 中读取时返回计算值（如
auto、100%），而非你写的原始值，调试时别只看element.style.xxx
真正麻烦的不是怎么写 style，而是当多个 JS 模块、框架或内联脚本都在操作同一个元素的 style 时，谁先谁后、谁覆盖谁，几乎没法靠肉眼追踪。留心这一点，比记住语法规则更重要。
