代码教程——第十八章 导航条（三）

本章代码点击即可下载

我刚写下这个标题你就跑过来大喊着，终于又开课了，上节课我就有点觉得不对劲，你说那文字紧贴着左边能看吗？赶紧想想办法！

嗯，是的，紧贴着左边确实不好看啊，那我们这节课来想办法解决这个。这时候就要用到我们前边的盒模型了。那么我先开始打比方，打完比方再讲要用的一些属性，最后是解决今天的问题哦。

我们说 div 是一个盒子，就是个纸箱啊，方方正正的，四面有纸板挡着，可以装东西，也可以把内外的东西分隔开来，当然上面还可以摞上东西，或者底下垫上东西。就仿佛快递库房里的一只普通的不能再普通的纸箱，混迹于亿万同类之中，平凡，仿佛是他的唯一标签……（啊？！这不是在简书写散文？不好意思我跑题了）

当然了，其实这是我说的白话，但是我觉得很好的说明了他的特性，官方描述管这叫做容器，咱没那高的领悟能力，一说容器我就想起烧杯什么的……那就没法理解去了。你就知道这么个事就行，别回头一说起容器来不知道，然后再往下说就说是看稻米鼠那个扯淡的教程学的……

我就觉着快递箱这个比喻太方便，太形象了，所以我坚持这么叫了。咱们继续说快递箱，然后我们开始想象，页面是一个大屋子，我们从左上角开始向下一个挨一个的码纸箱，就码一层，那肯定就按着顺序排过来了，这连小孩子过家家都会玩。这个叫做文档流，别管他啥意思，记住这个比方和对应的名词就 OK ，以后我们就可以交流。我总得告诉你这是扳手，那是锤子，以后着急的时候就可以跟你吼：“小心锤子别砸了你的手！”，一下都明白，否则我跟你喊：“小心那个一头大一头小，丁字形的，用来砸东西的，铁的硬邦邦的玩意，别砸……”你已经砸完了，但至于他为什么叫锤子，你管呢！

前边我们做了一个 #nav 的快递箱，还做了一个 #logo 的快递箱。都设置了他们的尺寸，一个宽度，一个高度。这就是设置了两个快递箱的尺寸啊。一个长一个宽，别问我厚度，这里用不着。然后我们想啊，#nav 我们设置了一个背景，但是他里面装的东西（另一个箱子 #logo）我们却可以看到，这说明什么？我们设置的背景是箱子底的颜色，而箱子的顶是透明的，你想想是不是？顶不透明我们就看不到里边了啊，背景色又填满了整个箱子，却遮不住箱子里的东西，那它就是底面的颜色喽。

好了，我们再考虑啊，你说 #logo 我们没设置背景吧，可是为啥底下不是白色啥的？确是套在他外边的箱子的背景色（底面颜色）？这只能说明一个问题，div 默认的背景色是透明的，也就是这个快递箱啊默认顶面和底面都是透明的，然后我们看到另外四个面（上下左右）了么？，好了他们也是透明的！

然后我们再想大家都收过快递，易碎品什么的是只用一个纸箱装了就行么？不是吧，总是要做防护措施的，防护措施不外乎两种：1、 箱子里面加上填充物；2、箱子外面裹上汽泡纸。那么填充物使得我们的货物需要一个比他原本体积更大的箱子，将将好装下货物的箱子还怎么放填充物，必须换大箱子，结果你收到快递，呀！这东西这么大？结果是里边放了填充物。那么这个填充物就是内补，在箱子里边补充一下嘛～

然后我们再说外面裹的泡泡纸，裹上泡泡纸会影响箱子的大小么？不会，箱子还是那么大，但是裹上泡泡纸他们整体占得面积就大了，这个纸箱和那个纸箱之间就产生了距离，这个距离是多少？就是一个的泡泡纸厚度加上另一个泡泡纸的厚度。对吧？这就是外补。

再想，假如无论填充物还是泡泡纸，都是透明的，就是看不到啊，当然东西还是存在的。那么我们加了填充物（内补）之后我们看到的是什么？货物和箱子之间保持着一定的距离，对吧，因为有看不见的填充物在那里呢。加了泡泡纸（外补），我们看到什么？箱子之间产生了距离，因为看不见的泡泡纸在他们之间呢。

这样我们就理解了外补和内补。我们说箱子的底面可以定义颜色，那么周围的四面（上下左右）可不可以定义呢？可以啊，可以定义颜色还可以定义厚度呢，原本这个箱子的四壁是没有厚度的，存在，但是厚度是 0 ，能理解吧，就是文学中的薄若蝉翼的意思，有，但是看不到，因为太薄了，还是透明的。所以当我们设置了它的厚度和颜色我们就可以看到他了吧？这就是边框。

那么现在这个模型建立起来了，一个盒子从外往里依次是：

泡泡纸 —— 外补

纸箱壁 —— 边框

填充物 —— 内补

易碎品 —— 内容

到这里都很好理解吧，说不好理解的那个去首富家多买点东西就懂了。

这比方打完了，你可得记住，这是理解后面的关键哦！我从来不说代码是关健，你理解他才是关键，代码是可以查的，但是怎么理解他，然后能用他，这是你该掌握的。

然后说 CSS 属性：

内补：padding

外补：margin

边框：border

这三个属性有些共同点，比如你给他们赋予一个数值，那就是四边都一样，都是这个数值，这很好理解。平均主义，你有我又大家有。

但是事实上他们都涉及了四个方向，其实四个方向可以分别设置的，那么我们给四个数值的话，比如： margin ：1px 2px 3px 4px; 看到啦，用空格分隔数值，这四个数值怎么对应方向的呢？记住啊，页面是从上开始写，所以我们从上面开始，顺时针旋转，于是就是：上、右、下、左。

这也很好理解，按着顺时针顺序挨个赋值而已，但是要是遇到变态呢，我就写了俩数值，那就是第一个指的是上边和下边都是这个数值，第二个值指的是左边和右边都是这个值。这个是平均分配外加面对面分果果……反正总而言之还是可以理解的。

但是我要是就给三个数值呢？？？

太变态了！挨个分，上边，右边，下边，都有了，左边问啊：“那我呢？那我呢？”你也不好意思说没他的份啊，所以就让他跟对面的共用一个数值算了。所以三个值代表：上、左右、下。

然后呢，其实这三个属性都是简写属性，就是把几个属性合在一起写的。要是分开写呢？比如：

四个方向可以这样分别定义，上面的四个方向分别是上右下左。当然，border 的定义要略复杂一些，因为他不光需要一个宽度，还需要边框的样式和边框颜色的定义。这些我们留在以后再说。

现在在回到本章的开头，想想我们其实是要做什么呢？两边留上一些空白，对吧，但是这些空白还要有背景，其实就是在 #nav 元素的里边对不对？那就是给 #nav 加内补喽～

你说好像我给 #logo 加上外补也能达到相同的效果，但是你忽略了一个隐含条件：我们说左边需要空白，其实如果右边有内容的话你会说右边也需要留出空白的，而加在 #logo 上的属性显然不能满足这一要求。只有给 #nav 这个盒子左右两侧放上填充物才能比较针对性的解决上述问题。

好了，我们废话了将近三千字，只是为了得出一个结论，我们应该给 #nav 加上如下属性：