检查工具使用非常方便，既可以根据代码查看页面布局，也可以根据布局查看对应的外观。

（1）使用chrome浏览器打开需要进行修改的页面，右键，点击检查，就出现开发者工具界面（如上图）；

  ：点击可以选择元素，当标识为蓝色时开始选择元素，黑色时不选择。

  ：点击可以切换手机端和PC端。

（2）右侧styles查看元素的外观样式，双击可以编辑；点击computed可以查看元素的空间情况（如下图），最中间的蓝色部分是元素所占的部分，元素外侧绿色代表padding值，黄色代表margin值。