link标签放在body里必然触发fouc；浏览器流式解析时先渲染无样式dom，导致闪白、布局抖动、移动端错位及ssr hydration失败，且旧版ie直接忽略。
link标签放在body里必然触发FOUC
浏览器自上而下解析HTML，<link rel="stylesheet">在中，等于告诉渲染引擎：“先画页面，CSS等会儿再算”。结果就是按钮、文字、布局先用浏览器默认样式闪一下，几百毫秒后才套上你的圆角、阴影或响应式断点——这就是FOUC（Flash of Unstyled Content）。旧版IE6–8直接忽略，整页无样式；移动端弱网下更明显。
实操建议：
-
<link>必须是的直接子元素，紧贴<title></title>后面写，别嵌在<script></script>或<meta>里 - 别信“放
开头也差不多”——部分 Safari 版本会直接跳过 - SSR 场景（如 Next.js 静态导出）下，
位置错误会导致服务端渲染首屏没样式，hydration 时补上，视觉跳变无法避免
rel="stylesheet"拼错或漏写导致静默失效
浏览器只靠rel值决定是否启动 CSS 解析流程。rel="stylesheet"是HTML5规范唯一认可的取值。漏掉、写成rel="style"、rel="css"、rel="StyleSheet"（大小写敏感）、甚至rel="stylesheet "（末尾空格），整条<link>就退化为普通链接：Network 面板能看到请求发出去了（200），但 Elements 面板 Styles 栏完全空白，控制台也不报错——按钮永远是原生蓝边框+灰底。
实操建议：
- 检查
<link>是否同时包含rel="stylesheet"和href，二者缺一不可 - 删掉过时的
type="text/css"，HTML5 中已冗余，写了不报错但纯属多占字节 - 引号必须闭合：
href=button.css在某些解析器下会截断路径，务必写成href="button.css"
href路径基准算错，根本加载不了CSS
路径基准永远是当前 HTML 文件的 URL，不是你编辑器打开的目录，也不是 CSS 文件所在位置。比如 HTML 在/blog/post.html，写href="css/button.css"，浏览器实际请求的是/blog/css/button.css，而不是你本意的根目录下/css/button.css。Network 面板看到GET /css/button.css 404，基本就是它。
实操建议：
- 优先用根相对路径：
href="/css/button.css"（开头/表示从域名根目录算起） - 相对路径要严格按 HTML 位置推算：若 HTML 在
/pages/index.html，想引用/css/reset.css，得写href="../css/reset.css"，不是./css/reset.css - 本地开发时别双击打开 HTML 文件，用
python -m http.server或 Vite 启服务，避免file://协议下路径解析异常 - 检查 Network 面板的 “Initiator” 列，能直接定位是哪个 HTML 文件发起了失败请求
preload关键CSS但没配stylesheet会白忙一场
有人用<link rel="preload" as="style" href="critical.css">提前下载首屏必需CSS，这本身没错。但rel="preload"只下载不解析、不应用——它不会自动变成样式表。如果没配对应的<link rel="stylesheet" href="critical.css">，或者用 JS 动态切换rel时逻辑出错，照样 FOUC。
实操建议：
-
rel="preload"必须和rel="stylesheet"配合使用，二者href值需完全一致 - 不要为了“优化”把
<link rel="stylesheet">挪到底部，那是JS的逻辑，对CSS完全反效果 - 多个
<link>按顺序加载，后加载的CSS规则会覆盖前面同名选择器，调试时“改了没变”常因这个被忽略
<link>那行代码本身就没被浏览器当真——位置错、属性漏、路径偏，三者任一出问题，闪屏就躲不掉。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
