从上篇主要分享了一些学习的资源。那么今天我们学习下如何调试前端网页的样式。
1. 认识调试控制台（以谷歌浏览器为例）
右键网页，选择【检查】即可打开控制台。或者按【F12】打开控制台。打开后右边红色框的区域就是我们的调试控制台。
接下来我们按照介绍下调试网页样式的工具。
1.1 元素选择
一般我们要调样式，都是先要找到需要调试的元素，找到需要调试的元素就可以借助这个元素选择工具。首先，我们点击控制台区域的左上角，然后鼠标移动到网页区域中点击我们我们想要调试的元素。同时右边的控制台区域就可以看到这个元素及样式了。
1.2 尺寸工具
有时候，我们需要调试不同尺寸的网页或者移动端设备，此时我们需要点击控制台区域左上角的第二个工具。点击后，就可以切换不同设备的尺寸以及自定义尺寸。
1.3 元素面板
点击控制台区域左上角的第四个工具（元素/Element）。点击后，就可以看到以下的面板。
左侧显示的是dom（dom树）我们除了通过元素选择工具选择元素，也可以通过点击dom树中的元素来选择元素。右侧就是这个元素的样式。
我们看到样式里面有个继承自，这个是什么呢？这个是因为CSS属性是可以被继承的，也就是子元素某些样式效果继承自于父元素的。而继承自父元素的样式也可以通过样式中看出来。
2. 调试样式
第一步，选择我们需要调试的样式。
第二步，在右侧的【样式】中调试我们的CSS属性。除了可以调试已加的属性，还可以添加新的属性去调试。
3. 今日总结
- 可以通过F12打开控制台。
- 样式面板中可以调试已有的属性，也可以添加新的属性。
- CSS样式是可以被继承的，子元素可以继承父元素的某些属性。
