留白标签样式

HTML5—8天轻松学会写网页（五.1）标签样式初始化

我们上节课留下了一个问题，就是在顶部有一小块留白到底是什么还没有解决。我们现在就来分析一下！当我们对当前效果...

我们上节课留下了一个问题，就是在顶部有一小块留白到底是什么还没有解决。我们现在就来分析一下！

当我们对当前效果进行检查的时候，看数字1的位置，我们将鼠标放到数字1的div上，此时就会产生数字的效果。数字2中包含几个颜色分布，首先就是两边的浅黄色，这两边的浅黄色其实就是左右margin,其实是中间的浅绿色，这块浅绿色实际上就是我们为div设定的宽度，最后我们看浅蓝色的部分，其实就是我们的内容区域了。

如果你将图片放大应该就会留意到一个细节，那就是在顶部的上端、左端以及右端都有一小块的留白，我们感觉这个应该就是我们要解决的一个重点。在解释这个问题之前，我们还得来看看数字3。

在数字3中我们会发现我们之前学过的三层结构，最内层其实就是我们的内部部分，往外一层就是padding留白，之后的是border也就是边框，然后在最外层就是margin边距了。

我们看到的这个图层它其实有一个自己的名字，叫做盒子模型，我们之前一直没有介绍，其实这个盒子模型不但是一个摆设，而且还可以做交互，比如说可以直观的告诉我们此时的内容区域占多宽多高，留白的区域占多少位置，边框border是多少，以及margin的大小都可以。所以后面我们会经常使用盒子模型来查看现在我们网页的一个布局。

那么现在我们已经说了盒子模型，我们在回到刚刚的问题上，那一小块的留白到底是谁影响的？我们首先要排除一下嫌疑，我们说div肯定不是，为什么呢？因为当我们点击div的时候，我们发现div所能影响的区域都已经给我们显示出来了。那除了div还有谁呢？div里面的元素肯定也不是了。那除了这些标签元素之外还有谁呢？或者说还有什么标签没有说？

好在我们此时的代码不多，所以很快就可以捉到没提到的标签，那就是body标签，也就是我们数字1。

我们发现当我们选中body标签的时候，在数字2的区域，就显示出来此时的两种颜色，一个浅蓝色的区域，另外一个就是浅黄色的区域。浅黄色的上左右，都有一小块的留白，好像就和我们要找的问题很像。

我们继续看数字3的位置，这个地方有一个margin：8像素，这代表的是给body的上下左右都加了一个8像素的边距。

最后我们在看数字4的位置，也就是我们的盒子模型，我们发现最外层的margin还真都有8像素的边距。

此时其实我们已经锁定问题了，就是这块！但是这个我们并没有给body设定margin, 既然我们什么都没有做，到底是谁给body制定的这个样式呢？也正因为是这个设定，让我们的上部留白多了8像素。那到底是谁干的这个事。

我们看到在盒子模型的上边被我框住的地方，有一行英文，叫做user agent stylesheet. 这玩应到底是啥，它其实就是浏览器。也就是说我们一直找的那个问题根源就是这个浏览器造成的。

这个浏览器会自动给一些标签设置一些样式，例如此时我们看到的body标签，就默认设置了样式。这些样式呢，有些确实是有意义，但有些就自作主张甚至是给我们添麻烦了。比如说给我们添加了8像素，其实对于我们而言，在设计网页的时候，我们期望的是拥有全盘操作的权利，这样才可以更合理的规划设计。

那对于这些浏览器给我们自作主张设定的样式，我们该怎么办呢？肯定是必须要抹平所有不符合我们要求的样式设置，这件事情我们叫做“标签样式初始化”。

我们首先来说说标签样式初始化的原因：

由于浏览器会自作主张的为一些标签添加一些默认样式，这个我们叫做user agent stylesheet，浏览器添加的这些默认样式会给我们造成一定的麻烦。就像我们刚刚遇到的，给我们多出了8像素的留白。但这还不是最糟糕的，最坏的问题是，不同的浏览器的样式还不一样。

那该怎么搞？

标签样式初始化的实质其实就是让我们自己亲自为标签制定默认样式，覆盖那些浏览器自作主张或者是不和谐的部分，也就是我们自己掌握全盘的权利。

在说怎么初始化之前，我们在回顾一下以前学过的知识。

不知道大家还记不记得我们曾经学过这么一种样式的定义方法:叫做

class= "nav", 不记得也没有关系，记得的就更好。我们统一回忆一下。

首先要在style标签里写一个.nav+花括号{}，然后在具体的某一个标签上写一个class="nav",这个东西是什么呢？实际上就是对标签样式的一种扩展，从写法上也能看的出来，相当于为这个标签附加了一个东西，这个就是标签扩展样式。那我们来对比一下扩展标签和初始化标签样式的不同。

扩展标签样式和初始化标签样式，这两个之间有什么区别，我们来说一下，可能会有点绕口，但多读几遍，就能领会了。

扩展标签样式：是不改变标签原本样式的前提下，扩展一些样式。

初始化标签样式：则是从根本上改变标签的样式。

由于比较绕，所以我们来举个例子！

我们首先在style样式中写了一个.nav样式，然后我们给某个标签指定了class="nav"，此时这个标签就有了nav的样式，也就是说这个nav影响了与之相关的标签。

那如果我们在写一个a标签。

虽然写了a标签，但是我没有给这个a标签指定class="nav"，那就没有收到影响。其实还是非常好理解的，有就影响，没有它不知道，所以就不会有影响。

但初始化就不同了，就是一旦我们初始化了一个标签的样式，比如说a标签，那么在你整个html文件中所有的a标签都会收到影响。这个呢也就是所谓的区别。

那初始化标签样式写在哪里呢？我们仍然是写在head标签里。怎么写？

我们仍然用我们学过的例子来说，扩展标签我们写的时候，就是有一个“点.”，上图有一个红红的点，然后写一个样式名称，后面跟一个大括号。

初始化标签样式的写法就是没有“点”，但要指定你要初始化的标签名，以我们现在遇到的问题为例，body多了不该有的东西，那我们就写把这个body后面加上花括号{}，就ok了。

初始化这件事该怎么做呢，毕竟在html中有很多标签，我们所涉及到的也不过是冰山一角，那么多标签我们总不能每个都初始化吧。那太麻烦了。

其实初始化标签这个事，是所有网站都遇到的问题。所以我们可以参考那些大网站做的范例。来实现我们自己网站的实施。

我在这里就默认大家已经把这套初始化范例写好了，那我们现在把这套初始化放到我们的sublime中，然后通过刷新网页看看效果。

我们发现添加了初始化之后，之前body中的8像素边距就没了，并且顶部的留白也按照我们设定的展示出来了。

那么到现在我们整个网页的标题栏就算是功德圆满了。下一节我们来说说广告栏的部分。