/开头的路径以当前网站根目录为起点，即域名后的第一个/；例如访问https://example.com/app/index.html时，/css/style.css请求的是https://example.com/css/style.css，而非/app/css/style.css。
绝对路径和相对路径在 CSS 中表现不一致，根本原因在于：它们的“起点”不同，且这个起点不由 CSS 文件自身决定，而是由**引用该 CSS 的 HTML 文件位置**或**浏览器当前 URL 路径**间接控制。
href="/css/style.css" 中的 / 是从哪开始算的？
以 / 开头的路径是根相对路径（root-relative），它的起点是**当前网站的根目录**，即浏览器地址栏中域名后的第一个 /。比如访问 https://example.com/app/index.html，那么 /css/style.css 实际请求的是 https://example.com/css/style.css，不是 https://example.com/app/css/style.css。
- 如果项目部署在子路径（如
/app/），但你写了href="/css/style.css"，浏览器会直接去根下找，404 是大概率事件 - Nginx/Apache 配置里用了
location /app { alias /var/www/myapp/; }，那静态资源必须物理落在/var/www/myapp/css/，且alias末尾必须带斜杠，否则路径映射错位 - Vite、Webpack 等构建工具默认把
public/下文件映射到根路径，此时写/logo.png才安全；但若资源在src/assets/，用/开头反而会 404
background-image: url("images/bg.jpg") 在 CSS 里为什么常出错？
CSS 中 url() 的路径是相对于**CSS 文件自身所在位置**解析的，不是 HTML 文件。这点和 <link href> 完全不同，容易混淆。
- 假设
index.html在根目录，引用了css/main.css，而main.css里写了background-image: url("images/bg.jpg")，那浏览器实际找的是css/images/bg.jpg，不是根目录下的images/bg.jpg - 要指向根目录下的
images/，得写url("../images/bg.jpg")（因为 CSS 在css/目录，需先跳回根） - 如果 CSS 是内联在 HTML 里的（
<style></style>），url()则按 HTML 当前路径解析 —— 这种混用场景极易导致行为不一致
为什么本地开发能跑，上线就 404？
核心矛盾是开发服务器（如 Vite 的 vite preview 或 Webpack Dev Server）通常把所有请求都 fallback 到 index.html，掩盖了路径错误；而生产环境 Nginx/Apache 是严格按文件系统路径匹配的。
- 开发时写
href="css/style.css"，Vite 自动注入 public 资源，看似正常；但构建后若没配base，index.html被放到子目录，相对路径就全崩了 - 用了
<base href="/myapp/">可统一修正所有相对路径基准，但它会影响页面内所有相对 URL（包括<a href></a>、<img src>），一不小心就把导航链路搞乱 - 现代构建工具（如 Vite）推荐用
import "./style.css"或import.meta.env.BASE_URL拼接路径，比手写/更可靠
最易被忽略的一点：HTML 的 <link> 和 CSS 的 url() 使用两套完全独立的路径解析逻辑，且各自参照物不同。混用时务必确认「谁在引用谁」「参照点在哪」「构建后物理路径是否真存在」——光看代码结构看不出问题，得查 Network 面板里实际发出的请求 URL。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
