CSS 404 的根本原因是 PHP 拼接资源路径时未正确处理端口号：$_SERVER['SERVER_NAME'] 不含端口，需结合 $_SERVER['SERVER_PORT'] 判断并显式拼接非标准端口（如 :88），否则浏览器请求地址与实际路径不匹配。
直接结论：CSS 404 不是文件没放对位置，而是 PHP 动态拼路径时漏了端口号——$_SERVER['SERVER_NAME'] 不带端口，$_SERVER['SERVER_PORT'] 才是关键。
为什么改了 XAMPP 端口（比如 :88）后 CSS 就 404？
浏览器实际请求的是 http://localhost:88/assets/style.css，但 PHP 生成的 <link href="..."> 地址却是 http://localhost/assets/style.css（缺 :88）。原因在于：$_SERVER['SERVER_NAME'] 只返回 localhost，不包含端口；而 Apache 监听的是 :88，浏览器向默认的 :80 发请求，自然 404。
常见错误写法示例：
$path = "http://" . $_SERVER['SERVER_NAME'] . __DIR__ . "/"; // ❌ 永远没端口
define('ASSETS', str_replace("app/core", "public/assets", $path));
正确做法必须显式判断并拼接端口：
立即学习“前端免费学习笔记（深入）”；
- 当
$_SERVER['SERVER_PORT']是'80'或'443'时，URL 中省略端口（HTTP/HTTPS 默认行为） - 其他端口（如
'88'、'8080'）必须显式加上':' . $_SERVER['SERVER_PORT'] - 不要硬编码
':88'，否则部署到其他端口又失效
如何安全拼出带端口的资源基础路径？
用这个逻辑块替换你原来拼 ROOT 或 ASSETS 的代码：
$port = ($_SERVER['SERVER_PORT'] == '80' || $_SERVER['SERVER_PORT'] == '443')
? ''
: ':' . $_SERVER['SERVER_PORT'];
$path = "http://" . $_SERVER['SERVER_NAME'] . $port . str_replace($_SERVER['DOCUMENT_ROOT'], '', __DIR__) . "/";
define('ASSETS', str_replace("app/core", "public/assets", $path));
注意三点：
-
str_replace($_SERVER['DOCUMENT_ROOT'], '', __DIR__)比直接拼__DIR__更可靠，避免路径重复或越界 - 别用
$_SERVER['HTTP_HOST']替代——它可能被客户端篡改，且含端口时格式不稳定（如localhost:88或[::1]:88） - 如果项目部署在子目录（如
http://localhost:88/myapp/），这个方案仍会出错；此时应改用相对路径或$_SERVER['SCRIPT_NAME']推导
检查 Network 面板里 CSS 请求的真实 URL
按 F12 → Network → 刷新 → 筛选 .css，点开那个失败的请求，看 Headers 标签页里的 Request URL：
- 如果是
http://localhost/css/style.css→ 说明 PHP 拼路径没带端口，回到上一步修逻辑 - 如果是
http://localhost:88/css/style.css但状态仍是 404 → 检查文件是否真在XAMPP\htdocs\css\style.css，注意大小写和斜杠方向（Windows 下通常不敏感，但 Docker 或 Linux 部署会翻车） - 如果是
http://192.168.x.x:88/...→ 说明你在手机访问，但 Apache 未配置允许外部访问（见下一条）
手机访问时 CSS 404 还要额外开 Apache 权限
本地浏览器能加载，手机却 404，大概率是 Apache 默认只允许 127.0.0.1 访问。编辑 XAMPP\apache\conf\extra\httpd-xampp.conf，找到类似这段：
Require local
替换成：
Require all granted
然后重启 Apache。注意：
- 别只注释掉
Require local，不加新规则会导致 403 - 修改后若仍 403，请确认 Windows 防火墙已放行 Apache（
httpd.exe） - 此配置仅用于开发环境；上线前必须改回严格限制
端口、路径、权限三者只要漏一个，CSS 就静默失败——尤其端口问题最隐蔽，因为错误 URL 看起来“完全合理”，只是少了一个冒号和数字。
