css必须放在中而非中，否则会引发fouc（无样式内容闪烁）、部分样式被忽略、seo不利等问题；浏览器自上而下解析html，若在内，css延迟加载导致先渲染无样式的dom，再重绘，破坏用户体验与标准规范。
为什么CSS必须放在里而不是
因为浏览器会阻塞渲染，直到CSSOM构建完成——放
里等于主动制造FOUC（无样式内容闪现）甚至整页白屏。旧版IE直接忽略中的，现代浏览器则会先吐出未样式化的DOM，再重绘，用户看到的是“乱码→弹出样式”的抖动效果。实操中常见错误包括：
-
link标签写在开头或中间，Network面板能看到HTML快速加载完，但DOMContentLoaded延迟严重 - 本地双击打开HTML时看似正常（file://协议下部分行为异常），一上服务器就白屏或错位
- SSR生成的HTML中
link位置正确，但客户端hydration时JS又动态插入了另一份CSS，导致重复解析和重排
内联
顺序决定CSS优先级和解析时机：<style></style>是同步阻塞的，但没网络请求；<link rel="stylesheet">会触发预加载器扫描并提前发起请求。两者混用时，顺序错了会覆盖关键样式或拖慢首屏。
推荐做法：
- 把首屏必需的最小CSS（如
.header、.hero、字体声明）内联进<style></style>，体积控制在14KB以内（gzip后建议4–8KB） -
<style></style>之后再放所有<link>，确保外部CSS不会打断内联样式的即时生效 - 绝对不用
@import——它在CSS文件里出现，等于给加载链加锁，Network里会看到阶梯式请求，且无法被预加载器识别
动态插入CSS link时media属性怎么设才安全
直接document.head.appendChild(link)仍会阻塞后续HTML解析，且可能错过预加载优化。真正“非阻塞”的关键是让浏览器一开始就不把它当渲染关键资源。
正确姿势：
- 创建
link时设media="not all"或media="(min-width: 9999px)"，让它初始不参与CSSOM构建 - 等需要时（比如主题切换、打印触发）再改回
media="all"或media="print" - 避免在
DOMContentLoaded前大量动态插入，否则可能触发多次小范围重排，比一次性加载更伤性能
路径写错和rel缺失为什么常被忽略
这两个问题不会报错，但会导致CSS静默失效：Elements面板能看到link标签，Styles面板却空空如也，Network里找不到对应请求。
排查要点：
- 检查
rel属性是否拼成rel="styleSheet"或漏写——必须是rel="stylesheet"（全小写，无空格） - 路径一律用根相对路径：
href="/css/main.css"，避免./或../推算错误 - 打开Network面板，按
Initiator列筛选，直接定位是哪个HTML文件发起了404请求
最隐蔽的坑是开发时双击打开HTML——file://协议下路径解析规则不同，务必用python -m http.server或Vite起服务验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
