Html 如何判断哪些CSS设置影响布局？

我有一个有几个CSS文件的项目，每个都有许多不同的设置。偶尔我会在页面上放置一个元素，它会意外地出现，比如一个奇怪的缩进、字体颜色、悬停行为等等。要弄清楚到底是什么CSS设置导致了这种行为，一直都是一个探索。有没有办法确切地知道哪些CSS值应用于给定的元素？

Firebug有助于了解CSS是如何装饰元素的

获取Firebug（适用于Firefox）并使用“检查”功能-它将为突出显示的元素显示有效的CSS（以及它来自何处）。

最好的工具是Firebug，Firefox的一个扩展，它向您显示元素如何以及在何处继承其当前样式。

签出Firefox的“Firebug”。。。。为web开发人员提供的令人惊叹的附加组件

您可以单击元素，它将显示应用的类

---

更好的是，您可以直接更改css值，并在浏览器中实时查看结果，这使得设计更加简单和快速。

通常，您需要检查元素

• 在Firefox中，安装，右键单击元素并选择“检查元素”

• 在Google Chrome中，右键单击并选择“检查元素”

• 在IE8中，按F12或转到工具->“开发人员工具”，然后转到查找->“单击选择元素”，然后单击元素

---

检查完元素后，您将看到应用于该元素的CSS规则列表。您还可以获得计算样式。

正如上面提到的，Firebug是自切片面包以来最伟大的东西，它可以检查css是如何影响您的站点的

您还可以将这个小工具与firebug一起使用，这样您的CSS调试就容易多了

---

在这方面，Safari的新“Web Inspector”与Firebug一样好，甚至更好。现在Safari更智能了，我不再使用Firebug。

如果您使用的框架可以压缩CSS文件并将其“串在一起”以提高速度，请在开发时关闭该框架。另一个小贴士：花点时间学习CSS中的第一个C，cascade。了解一些CSS规则中的特殊性也会有很大帮助。