《jQuery与JavaScript入门经典》——2.3 调试CSS

本节书摘来自异步社区《jQuery与JavaScript入门经典》一书中的第2章，第2.3节，作者：【美】Brad Dayley著，更多章节内容可以访问云栖社区“异步社区”公众号查看

2.3　调试CSS

要调试动态网页，还需知道如何调试CSS问题，因为要实现网页的动态性，很多时候都需使用JavaScript修改CSS布局。

如果JavaScript或jQuery脚本修改了DOM元素的CSS布局，查看Web浏览器中的代码不会有任何帮助，而需要查看浏览器应用于元素的CSS。为此，需要结合使用CSS检查器以及HTML检查器中的布局检查器和样式检查器。

2.3.1 使用CSS检查器
CSS检查器让您能够访问网页加载的所有CSS脚本，如图2.13所示。CSS检查器顶部有两个下拉列表，左边的下拉列表让您能够在下面两个选项之间切换。

• CSS源代码编辑：显示随网页加载的原始CSS。
• CSS实时编辑：显示当前应用于HTML元素的CSS。

右边的下拉列表包含所有这样的文件，即已加载的包含CSS的文件。这让您能够选择要查看和编辑哪个CSS文档。

在CSS检查器中，还可以编辑CSS，如图2.13所示。请注意其中的禁用图标，单击这个图标将禁用相应的CSS属性，而这个图标也将从红色变成灰色。您还可以直接编辑CSS属性的值，如图2.13所示。

2.3.2 使用样式检查器
除编辑CSS文件外，还可查看和编辑特定元素的CSS属性，为此需要切换到HTML检查器。图2.14显示了HTML检查器中的“样式”选项卡。在样式检查器中，可查看和修改特定元素的属性值。

图 2.14 还演示了样式检查器的一些重要功能。注意到在菜单中选择了：hover，这将显示将鼠标指向选定元素时，将应用于该元素的CSS样式。另外，注意到选择器span:hover覆盖了选择器span的background-color设置。样式窗口显示了完整的CSS层次结构，让您能够知道属性值来自哪个CSS选择器以及哪些值被覆盖。

2.3.3 使用布局检查器
调试CSS时，另一个功能极其强大的工具是HTML检查器中的布局检查器。布局检查器提供了易于使用的可视化界面，让您能够查看选定HTML元素的CSS布局，如图2.15所示。

在布局检查器中，您可以使用、查看和修改下述方面。

• 外边距：外边距是布局检查器中最外面的矩形，每边都显示了外边距值。在布局检查器中，您可双击这些值来直接修改CSS属性。
• 边框：边框是下一个矩形，它也有4个值，您可修改这些值来调整选定HTML元素的CSS边框属性。
• 内边距：内边距是下一个矩形，它也有4个值，您可修改这些值来调整选定HTML元素的CSS内边距属性。
• 内容：内容是布局检查器中最内面的矩形，它有两个值（长度和宽度），您可修改这些值来调整选定HTML元素的CSS属性length和width。
• 标尺：标尺显示在网页中，让您能够查看元素的尺寸。
• 辅助线：当您在布局检查器中选择外边距、边框、内边距或内容矩形时，网页中将出现辅助线。辅助线分水平和垂直两种，指出了选定CSS属性边缘的位置，在您需要在布局中对齐元素时很有用。

编辑CSS布局

为帮助您理解如何使用Firebug调试和编辑CSS布局，来看程序清单2.3所示的代码。这些代码使用选项卡式方框显示信息。CSS属性存在一些问题，导致网页不能正确地显示，如图2.16所示。

注意到这些选项卡垂直地堆叠，且选项卡之间有空隙。

程序清单2.3 一个非常简单的HTML文档，其中存在一些HTML语法错误，如图2.16所示

请按如下步骤修复CSS布局。

1. 在项目的文件夹hour02中，新建文件hour0203.html，再其中输入程序清单2.3所示的代码，再保存文档。
2. 启动Firefox并单击Firebug图标以启用Firebug。
3. 在Firefox中输入如下URL。

1. 单击Firebug中的标签HTML，再依次展开元素< html>、< body>、< div id="container">、和< div id="tabs">，如图2.17所示。
2. 选择元素< div id="container">并展开它。
3. 选择子元素< div id="tabs">。
4. 单击Layout（布局）标签，并将鼠标指向外边距矩形。查看用于包含标签的元素的外边距辅助线，它几乎与一个标签等宽，因此无法让全部三个标签并排显示。

1. 为修复这个问题，单击标签Style（样式），并将属性width改为300px，如图2.18所示。注意到三个标签并排显示了，但间距依然太大。

注意：也可以在布局检查器中直接修改外边距、边框、高度、宽度和内边距值。

1. 右击网页中的Name标签，并从弹出菜单中选择“使用Firebug查看元素”，将在HTML检查器中自动选择这个元素。
2. 单击标签“布局”（Layout），并将鼠标指向外边距矩形，如图2.19所示。注意到< span>元素的外边距为5像素，这就是标签没有紧靠在一起的原因所在。

1. 切换到“样式”选项卡，并禁用< span>元素的margin属性，如图2.20所示。现在，标签紧靠在一起，并紧靠着信息框。