接着上一章,我们继续看右侧面板:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【本章助记卡片:卡片 for 第五十章