《Smashing CSS》中文版样章

中文版样章：

http://44ux.com/index.php/2012/04/smashing-css-sample-chapter/

------------------

FIREBUG

Firebug（见图1-1）是任何网页开发人员的工具箱中不可或缺的两个工具之一（关于另外一个，请参考1.2节“Web Developer Toolbar”）。它是火狐浏览器（Firefox）中的一个完全免费的扩展，如果你用的是其他浏览器，你也可以接着往下看，因为你一样可以使用Firebug！

图1-1：Firebug主页

要想安装Firebug，可以在火狐浏览器中访问getfirebug.com，然后点击安装按钮（就在网页的右上方）开始安装，安装完成后重启火狐浏览器即可。现在准备开始你的神奇之旅吧！

我没法在这么短的篇幅中涵盖Firebug的全部功能。实际上，即使整个一章的篇幅都未必够用，我这里只讲一些重点。

图1-2中所示的HTML选项卡左侧展示的是文档的结构，点击箭头可以展开或收缩文档的子结构。注意在该选项卡中，当把鼠标悬停在某个元素名上时，该元素会在页面中高亮显示。最神奇的是，它还可以通过彩色区域和代码来展示元素的内边距（padding）和外边距（margin）。例如，本例中的内容区域为浅蓝色，内边距是淡紫色而外边距是浅黄色。具体什么颜色其实没那么重要，因为在页面上可以很直观地看到效果。

图1-2：通过Firebug查看元素的布局

在HTML选项卡的右侧，可以通过点击样式（Style）选项卡来查看应用在当前元素上的CSS（见图1-3）。这里不仅包含了你自己写的样式，还包含了浏览器自身的内建样式。例如，你可以看一下html.css和quirk.css这两个文件的内容，这些就是内建样式（这些样式称为“用户代理样式”，可以通过点击样式选项卡，在弹出的菜单中选择是否显示用户代理样式）。

有一点需要注意的是，Firebug有时候会显示一些像-moz-background-clip这种未曾声明过的属性，如果确定没有明确声明那些属性，基本上可以忽略掉。另外，如果你使用的是简写形式的属性，它也会自动扩展成独立的属性，也就是说像这样的代码：
...

http://44ux.com/index.php/2012/04/smashing-css-sample-chapter/