相对路径的起点是html文件而非css文件；href值始终以当前html所在url为基准计算，如/blog/article.html中写href="css/style.css"会请求/blog/css/style.css导致404，正确做法是根据html位置用../回退或使用根相对路径href="/css/style.css"（需本地服务器支持）。
相对路径的起点不是CSS文件，而是HTML文件
很多人写 href="css/style.css" 能在首页生效，但跳到 /blog/article.html 就 404，原因就是误以为“CSS 在 css/ 目录下，所以路径就该这么写”——其实浏览器只看 <link> 标签写在哪份 HTML 里、那份 HTML 文件放在哪。如果 article.html 在 /blog/ 子目录，href="css/style.css" 就会请求 /blog/css/style.css，而不是你放好的 /css/style.css。
- ✅ 正确理解：路径计算永远以 HTML 文件 URL 为原点
- ✅ 验证方法：右键页面源码中那个
href值 → “在新标签页中打开”，直接看能不能显示 CSS 内容 - ❌ 不要依赖编辑器目录树来“目测”路径，它和浏览器加载逻辑无关
- ⚠️
@import在 CSS 里才以 CSS 文件为起点，<link>的href和它完全无关
常见相对路径写法与典型错误
假设项目结构是：/index.html 和 /css/style.css 同在根目录下：
- ✅
href="css/style.css"：适用于index.html在根目录时 - ✅
href="../css/style.css"：适用于about.html在/pages/about.html，需退一级再进css/ - ❌
href="./css/style.css"：点号开头在多数构建工具（如 Vite、Webpack）中会被忽略或报错，不推荐 - ❌
href="style.css"：只在 CSS 和 HTML 同目录时有效，一旦 HTML 移动就立即失效
为什么根相对路径 /css/style.css 更可靠
加斜杠开头的 href="/css/style.css" 是“站点根目录相对路径”，它绕开了 HTML 所在层级带来的歧义，所有页面都按统一规则解析。
- ✅ 开发阶段：只要服务器支持（如
live-server、vite preview），所有页面都能加载成功 - ✅ 构建部署后：不会因路由嵌套（如
/admin/users/edit）导致路径错乱 - ⚠️ 注意：本地双击打开
file://协议时，/css/style.css会请求file:///css/style.css，404 是必然的——必须用开发服务器跑 - ⚠️ 不是“绝对 URL”，不带协议和域名，所以仍属相对路径范畴，只是基准变了
Network 面板快速定位路径问题
样式不生效？别猜，直接看浏览器 Network 面板：
- 筛选
css或全部请求，找状态码为404的条目 - 点击该请求 → 看 “Initiator” 列，它会明确标出是哪个 HTML 文件里的第几行
<link>发起的 - 再点开 “Headers” → 查看 “Request URL”，这就是浏览器实际尝试访问的地址，和你写的
href对着看差在哪 - 如果 Request URL 明显多了一层目录（比如多了
blog/），说明你用了纯相对路径且 HTML 位置变了
../，而是没意识到自己正在不同层级的 HTML 里复用同一套 href 值。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
