标签必须放在 中，否则因浏览器自上而下解析html， 中的样式无法参与首屏布局计算，导致闪动、样式失效或兼容性问题。
<style></style> 标签必须放在 里，否则样式可能不生效或导致首屏闪动。
为什么 <style></style> 放在
浏览器解析 HTML 是从上到下流式进行的。如果 <style></style> 写在 底部（比如紧挨着 ），那么前面的元素（如 <h1></h1>、<nav></nav>）可能已经完成渲染，样式来不及参与初始布局计算，造成视觉错乱或“闪屏”。尤其对首屏关键内容影响明显。
常见错误现象：
- 页面刚打开时文字/布局正常，0.1 秒后突然跳变
- 某些元素始终没应用预期颜色或间距，但用 DevTools 检查发现 CSS 规则已加载
- 在 Safari 或旧版 Chrome 中表现更不稳定
正确写法：位置、格式与基本结构
<style></style> 必须嵌套在 内，建议紧贴 <title></title> 后或 <meta> 之后。它只接受纯 CSS，不支持 JS、HTML 或模板语法。
实操建议：
- 写法示例：
<title>我的页面</title><style> body { margin: 0; font-family: sans-serif; } .card { background: #f9f9f9; padding: 1rem; } </style> -
type="text/css"可省略（HTML5 默认就是） - 不要在
<style></style>里写@media查询以外的 @ 规则（如@import不推荐，@keyframes可以） - 不能在
<style></style>里定义伪类交互（如a:hover可以，但<style> a { color: red; }</style>后再用 JS 动态加hover类才真正生效）
和内联 style 属性的区别与取舍
<style></style> 是内部样式表，作用于整页；而 style="..." 是内联样式，只作用于单个标签。两者优先级不同：style="color:red" 的权重高于 <style>p{color:blue}</style>。
容易踩的坑：
- 误以为
<style></style>能覆盖所有内联样式——其实不能，style属性优先级更高 - 在
<style></style>里写display: none或visibility: hidden用于“隐藏内容”，但没考虑可访问性：屏幕阅读器仍会读取visibility: hidden的内容，而display: none会被跳过 - 用
<style></style>定义 CSS 变量（如:root { --primary: #007bff; }）是合法的，但变量只能在 CSS 内使用，不能直接被 JS 读取（要用getComputedStyle(document.documentElement).getPropertyValue('--primary')）
动态注入样式时别直接往 <style></style>
如果需要运行时切换主题或加载新样式（比如暗色模式），不要用 document.body.appendChild(styleEl) —— 这种方式不可靠，部分浏览器不会重新触发样式重排。
推荐做法：
- 用
document.styleSheets[0].insertRule(...)直接插入规则 - 提前在
里放一个空的<style id="theme-style"></style>，后续用document.getElementById('theme-style').textContent = 'body { background: black; }' - 避免在
DOMContentLoaded之后再挂载<style></style>到，即使 DOM 已就绪，样式注入时机仍可能错过关键渲染帧
最常被忽略的一点：哪怕你只是临时调试，在 里随手加个 <style></style>，也有可能在后续接入 SSR、PWA 或 Web Component 时引发样式丢失——因为这些环境对样式注入时序更敏感。
