相对路径以HTML文件位置为起点，非CSS文件位置；href路径始终相对于link标签所在HTML文件，CSS内url()才以CSS文件位置为起点。
相对路径能用，但必须以 HTML 文件位置为起点算起；写错一层 ../ 就 404，不是 CSS 文件在哪决定路径，是 link 标签所在的 HTML 文件在哪。
href 路径始终相对于 HTML 文件位置
浏览器解析 <link rel="stylesheet" href="xxx"> 时，只看这个标签写在哪个 HTML 文件里、那个 HTML 文件放在哪，不看 CSS 文件自己在哪。哪怕 CSS 里又用了 url() 引图片，那里面的相对路径才以 CSS 文件位置为起点。
- 如果
index.html在网站根目录，style.css在/css/style.css，就写href="css/style.css" - 如果
about.html在/pages/about.html，同样想加载/css/style.css，就得写href="../css/style.css"（先退到根，再进 css） - 写成
href="/css/style.css"也能行，但这属于“站点根目录相对路径”，不是纯相对路径，且本地双击打开 HTML 会失败
常见错误：误把 CSS 文件位置当参照系
很多人把 style.css 放在 /assets/css/，然后在 /pages/article.html 里写 href="assets/css/style.css"——这会让浏览器去找 /pages/assets/css/style.css，显然不存在。
- 错误现象：
Network面板里 CSS 请求状态码是404，点击请求能看到浏览器实际尝试访问的完整 URL - 典型陷阱：编辑器里路径提示自动补全，补的是从当前文件（比如 CSS）出发的路径，但
href不认这个 - 调试建议：右键 HTML → “在浏览器中打开”，再开开发者工具 →
Network→ 刷新，盯住 CSS 请求的Initiator和URL
多层嵌套时 ../ 容易数错，建议用 / 开头的根路径
项目有 /blog/2024/post.html、/blog/2025/post.html、/css/main.css，每个 HTML 里写 href="../../../css/main.css" 或 href="../../../../css/main.css" 极易出错，而且移动 HTML 文件后全部失效。
立即学习“前端免费学习笔记（深入）”；
- 更稳做法：统一把静态资源放
/css/、/js/、/images/，所有 HTML 都用href="/css/main.css" - 前提：本地开发必须起服务（如 VS Code Live Server、
python3 -m http.server），否则/指向本地磁盘根目录 - 不能起服务的离线场景（如邮件附带 HTML），才考虑扁平化结构：所有 HTML 放同一级，CSS 全放同级
css/目录下，统一用href="css/xxx.css"
CSS 文件内部的 url() 路径规则不同
link 的 href 是 HTML 视角，而 CSS 文件里的 url("xxx")（比如 background-image）是以该 CSS 文件自身位置为起点的。
- 假设
main.css在/css/main.css，它要引用/images/logo.png，就得写url("../images/logo.png") - 如果写成
url("/images/logo.png")，就是根路径，和 HTML 的href逻辑一致 - Vue 单文件组件里
@import的路径也遵循 CSS 规则，不是 HTML 规则；@/是 webpack 别名，不属于原生路径机制
真正容易被忽略的是：HTML 和 CSS 两层路径系统各自独立，混用 ./、../ 时，得分别站在两个文件的位置上各算一遍，而不是凭感觉“往上翻两层应该就到了”。
