文章目录

• 前言
• 一、打开调试工具
• 二、使用调试工具

前言

Chrome浏览器提供了一个非常好用的调试工具，可以用来调试我们的HTML结构和CSS样式。

一、打开调试工具

打开Chrome浏览器，按下F12或者右击页面空白处→检查

二、使用调试工具

1. Ctrl+滚轮可以放大开发者工具代码大小
2. 左边是HTML元素结构，右边是css样式
3. 右边css样式可以改动数值（左右箭头或者直接输入）和查看颜色
4. Ctrl+0复原浏览器大小
5. 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
6. 如果有样式，但是样式前面有黄色感叹号提示，则是样式属性书写错误