稻米鼠 · 更新于 2018-11-28 11:00:43

第十八章 导航条(三)

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

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

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

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

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

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

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

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

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

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

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

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

泡泡纸 —— 外补

纸箱壁 —— 边框

填充物 —— 内补

易碎品 —— 内容

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

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

然后说 CSS 属性:

内补:padding

外补:margin

边框:border

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

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

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

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

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

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

margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;

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

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

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

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

padding:0 30px;

本章学习卡片:卡片 18

本章代码下载:本章代码


本书是收费的,不过交费凭自觉。价格定义为每人请我喝一杯咖啡(哪种品质的咖啡随意),支付宝账号:

alay9999@163.com (刘源)

为了让大家阅读方便,本书将在如下站点发布,但最终内容以主站为准:

未经本人许可,禁止任何形式转载。相关事宜请联系: dms@zji.me