link标签不在head里会直接触发FOUC，因浏览器仅解析head内的link才阻塞渲染并构建CSSOM；写在body中等于放弃样式控制权，导致首屏文字跳变、布局错乱、媒体查询失效，IE6–8甚至完全忽略。
link标签不在head里会直接触发FOUC
浏览器流式解析HTML时，只有
内的才会阻塞渲染、构建CSSOM；写在里等于主动放弃样式控制权。结果就是文字先用默认字体蹦出来，再跳成你设的字体，表格列宽错乱，媒体查询压根不生效。常见现象包括：页面闪白、字体跳变、首屏内容错位，移动端尤其明显。IE6–8更极端：直接忽略
SSR框架（如Next.js）中还会导致hydration失败——服务端渲染的DOM有样式，客户端挂载后突然变回裸奔状态，控制台报Hydration failed because the initial UI does not match what was rendered on the server。
rel="stylesheet"拼错或漏写导致静默失效
浏览器只认rel="stylesheet"这个精确值：必须小写、带英文引号、前后无空格、不能少字母。写成rel=stylesheet（缺引号）、rel=" StyleSheet "（首尾空格）、rel="StyleSheet"（大小写错），都会让标签退化为普通链接。
立即学习“前端免费学习笔记（深入）”；
表现是：Network面板能看到200响应，但Elements面板Styles栏为空，控制台不报错，页面白屏或裸奔。这不是CSS写得有问题，而是浏览器根本没启动CSS解析流程。
特别注意：rel="preload" as="style"或rel="prefetch"不会加载样式；rel="icon"或rel="shortcut icon"也完全无效。
href路径算错让CSS请求404却不自知
href的计算基准永远是当前HTML文件的URL，不是编辑器目录，也不是服务器根路径。比如/blog/article.html里写href="css/style.css"，浏览器实际请求的是/blog/css/style.css，而非你预期的/css/style.css。
本地双击打开HTML（file://协议）时，相对路径还可能被安全策略拦截，导致开发时正常、部署后404。检查方法很简单：右键查看源码→复制href值→粘贴到新标签页，能直接看到CSS内容才算通。
建议统一用根相对路径：href="/css/style.css"；避免./或../嵌套，Linux服务器还要注意Table.css≠table.css。
media属性语法错误会让CSS“条件性消失”
media不是装饰字段，一旦写了就必须合法。比如media="screen and (min-width:768px"（少了个右括号），整个会被浏览器视为无效，CSS既不加载也不报错。
默认不写media等价于media="all"，始终生效；加了就得严格校验语法。打印样式要显式写media="print"，否则普通浏览下完全不生效。
最容易被忽略的其实是rel值的严格性和href路径的基准逻辑——它们不报错，却让整个样式链静默断裂。调试时优先盯死这两点，比翻CSS规则本身更高效。
