为什么在本地使用xampp的CSS无法正常工作，但是在本地或从Netlify站点打开相同文件时CSS仍能正常工作？

Question

因此，我一直在大学网站上工作，并且开始学习PHP，但是为此我安装了xampp并尝试从本地主机访问该网站。

据我了解，HTML文件和图像，甚至CSS中定义的（某些）图像都正在加载，但整个CSS文件却无法加载，例如float和flexbox以及某些填充，边框和不同类型的定位均不起作用如预期。肯定是在找到CSS文件，所以我认为<link>的{​​{1}}标签中没有问题。

HTML标头：

<header>

Answer 1

这仅仅是因为使用Xampp，浏览器会缓存您的CSS文件。这意味着，如果对文件进行更改，浏览器仍将访问缓存的文件，而不是新的文件。一个简单的技巧是从本地服务器打开CSS并刷新页面，以便使用新的CSS。 示例打开localhost:8080/project/css/style.css并刷新该页面

Answer 2

很有可能它无法按预期运行：

• 正如Doc-Han所说；缓存了旧版本的CSS。
• 您正在从以下相对路径中加载CSS：style.css。这意味着css应该与html文件位于同一文件夹中。也许应该从“ /style.css”或“ /resources/style.css”或其他位置加载css
• 也许CSS包含一些简单的错字，所以您使用的是'flaot'而不是'float'

通过浏览器开发人员工具检查您的页面。打开控制台。检查是否有任何错误。检查css是否已加载，还检查是否加载了正确的版本。检查样式规则是应用于正确的html元素还是完全应用于样式。 如果这是Chrome中的缓存问题，则可以打开开发工具，打开“应用程序”标签，点击“清除存储”菜单项，然后清除站点数据。现在重新加载页面。在网络标签中，您还可以点击“禁用缓存”并重新加载页面。

Answer 3

正如Doc-Han所说，这很可能是缓存，这是我认为我们大多数人在UI开发过程中都遇到的问题。

要解决此问题，您可以做的一件事是在隐身窗口中打开并进行调试，该窗口不会缓存文件，如果发生会话缓存，则可以重新打开以加载新集合。

或者，出于这个原因，有些代码编辑器则具有内置的Web服务器。我已经使用Adobe支架几年了，并且非常喜欢它。它使用内部节点服务器为页面提供服务，因此，它们为实时代码更新设置了页面。对代码的更改是实时反映的，我发现这对我处理UI开发流程有很大帮​​助，避免了此类问题，每次我进行更改仅节省了3-5秒的刷新时间（在您进行更改时加起来） 5000次更改。某些其他编辑器也提供类似的功能。

Answer 4

只需清除浏览器的缓存并完成！