第五十章 使用拐杖

接着上一章，我们继续看右侧面板：

上面也是三个标签页，目前我们主要使用前两个，第一个表示样式，第二个表示计算以后的属性。

下面我截取了两条内容，简单的看一下，element.style 的意思是元素的样式，其实是说这个元素的行内样式，就是我们这样书写的 CSS 内容：

<p style="color: red;">就是这种的哦</p>

下面的就是我们在其他 CSS 中所书写的内容了（内部样式表、外部样式表），如果这是外部 CSS 文件，那么后面会有一个带有下划线的文字写出，这是出自哪一个文件。

其他的结构就和我们在代码中所写的差不多了，每一条属性前面都有一个复选框，勾选就表示起作用，如果你取消勾选，那么这条属性就不起作用，这很方便我们调试。

如果某一条属性，被删除线给划掉了，那么说明他并没有起作用，可能被其他设定给覆盖了。

继续往底下看，会发现有一些定义，仿佛和我们当前的元素并没有关系，之所以显示在这里，是因为它其中的一些设定会影响到当前的元素。比如父元素的文字大小，被当前元素所继承。

好吧，刚才这些，我们基本还没接触到，就会觉得有些乱。能不能不要这么复杂，你就直接告诉我，当前元素都应用了哪些样式，这多干净利落，让人感到舒适。

那么来看第二个标签页，computed 表示计算之后的，我们可以先不关注它是如何计算的，我们只要知道，这里显示的全都是最终的结果。

可以看到底部就直接列出了这个元素最终被应用的样式。如果展开这些属性，就能看到它都受到了哪些定义的影响。

然后右边有一个 show all，就是显示所有，如果勾选上，下面就会显示出这个元素的所有属性，包括你没有进行设定的属性。不过这样内容会比较长，不是很方便查看。不过其实你也可以在 show all 的左侧直接输入关键词进行搜索。

这已经十分方便我们去研究一个元素的样式了。不过我们好像还有一个地方没有说，就是上面图片中那个，黄黄绿绿套了几层的盒子。

这就是当前元素的盒模型，并标注了各方面的尺寸。有好些属性，我们还没有学，所以先知道一下它是什么就可以了。当然即便我不说，你也很快就能够看明白——在最中间蓝色区域，600x69 说的就是元素的尺寸，两个值分别是宽和高。

这已经非常直观了，但是有的时候会希望更方便一些。那么还有一种极其快速的查看盒模型的方式，本来应该最先发现它的，不过因为我让大家把开发者工具最大化了，可能你没有看到。那么调整一下我们工具的窗口，让它不要遮挡页面的主要内容，然后把鼠标指向某一个元素的代码，不用点击：

我把鼠标的位置标记了一下，因为太不明显了。你会发现鼠标所指向的元素，在页面中被直接标记出了盒模型。并提示了元素的一个基本选择器，方便我们辨别是哪个元素，以及元素的尺寸（宽高）。

那么有了开发者工具，我们就可以更加直观和准确的去观察元素的样式，方便我们学习和理解，这就十分的开心了。那这么好的工具为什么不早拿出来呢？

早早告诉你们倒是可以，但我如何向你们描述它的功能呢？那时候你还不知道什么是选择器？不知道什么是盒模型？甚至分不清哪些是 CSS 中一条条的属性。我直接给你这样一个工具，看着复杂的界面，你岂不会立刻抱着枕头开心的睡觉去了？

到这里，我几乎把 CSS 的初步知识整个给倒过来讲了，但是我觉得这个顺序更便于理解。总之，能够用倒叙的方式来讲 CSS，小老鼠觉得自己帅帅哒~