推荐楼主可以这么做：
1.Elements选项卡
2.找到左下角有个像放大镜一样的按钮，点击，这时回到chrome页面，选择你想查看css样式的部分（选中的那部分会有一个遮罩层）
3.这时右侧有个Styles，点开，会看到当前选中部分的样式，在这里改是可以直接看到页面效果的。但它是临时的（页面刷新就没了），比较适合调样式。
建议用上面的方法调过，合适再写到css里
首先是启动谷歌浏览器的开发者工具的方法。在浏览器右上角的选项中点击，下拉菜单选工具——开发者工具，快捷键CTRL+shift+I打开开发者工具后，在浏览器下方出现一个调试面板。左侧是网页HTML调试查看，右侧是CSS代码调试，还有一些JS，资源的折叠起来了。
谷歌浏览器调试的好处就是，可以实现元素定位，把鼠标放在指定的元素上，就可以在浏览器的上面视图中加灰突出显示所对应的元素。
右侧的CSS代码调试是一个不错的工具，不仅可以查看对应的标签的代码，同时还可以实时更改代码的值并在浏览器上方视图中显现变化。
CSS调试中，还有盒子模型的形象视图。在右侧折叠面板中可以打开，实现对margin,padding等的定位计算。
