我剛寫(xiě)下這個(gè)標(biāo)題你就跑過(guò)來(lái)大喊著，終于又開(kāi)課了，上節(jié)課我就有點(diǎn)覺(jué)得不對(duì)勁，你說(shuō)那文字緊貼著左邊能看嗎？趕緊想想辦法！

嗯，是的，緊貼著左邊確實(shí)不好看啊，那我們這節(jié)課來(lái)想辦法解決這個(gè)。這時(shí)候就要用到我們前邊的盒模型了。那么我先開(kāi)始打比方，打完比方再講要用的一些屬性，最后是解決今天的問(wèn)題哦。

我們說(shuō) div 是一個(gè)盒子，就是個(gè)紙箱啊，方方正正的，四面有紙板擋著，可以裝東西，也可以把內(nèi)外的東西分隔開(kāi)來(lái)，當(dāng)然上面還可以摞上東西，或者底下墊上東西。就仿佛快遞庫(kù)房里的一只普通的不能再普通的紙箱，混跡于億萬(wàn)同類之中，平凡，仿佛是他的唯一標(biāo)簽……（??？！這不是在簡(jiǎn)書(shū)寫(xiě)散文？不好意思我跑題了）

當(dāng)然了，其實(shí)這是我說(shuō)的白話，但是我覺(jué)得很好的說(shuō)明了他的特性，官方描述管這叫做容器，咱沒(méi)那高的領(lǐng)悟能力，一說(shuō)容器我就想起燒杯什么的……那就沒(méi)法理解去了。你就知道這么個(gè)事就行，別回頭一說(shuō)起容器來(lái)不知道，然后再往下說(shuō)就說(shuō)是看稻米鼠那個(gè)扯淡的教程學(xué)的……

我就覺(jué)著快遞箱這個(gè)比喻太方便，太形象了，所以我堅(jiān)持這么叫了。咱們繼續(xù)說(shuō)快遞箱，然后我們開(kāi)始想象，頁(yè)面是一個(gè)大屋子，我們從左上角開(kāi)始往下一個(gè)挨一個(gè)的碼紙箱，就碼一層，那肯定就按著順序排過(guò)來(lái)了，這連小孩子過(guò)家家都會(huì)玩。這個(gè)叫做文檔流，別管他啥意思，記住這個(gè)比方和對(duì)應(yīng)的名詞就 OK ，以后我們就可以交流。我總得告訴你這是扳手，那是錘子，以后著急的時(shí)候就可以跟你吼：“小心錘子別砸了你的手！”，一下都明白，否則我跟你喊：“小心那個(gè)一頭大一頭小，丁字形的，用來(lái)砸東西的，鐵的硬邦邦的玩意，別砸……”你已經(jīng)砸完了，但至于他為什么叫錘子，你管呢！

前邊我們做了一個(gè) #nav 的快遞箱，還做了一個(gè) #logo 的快遞箱。都設(shè)置了他們的尺寸，一個(gè)寬度，一個(gè)高度。這就是設(shè)置了兩個(gè)快遞箱的尺寸啊。一個(gè)長(zhǎng)一個(gè)寬，別問(wèn)我厚度，這里用不著。然后我們想啊，#nav 我們?cè)O(shè)置了一個(gè)背景，但是他里面裝的東西（另一個(gè)箱子 #logo）我們卻可以看到，這說(shuō)明什么？我們?cè)O(shè)置的背景是箱子底的顏色，而箱子的頂是透明的，你想想是不是？頂不透明我們就看不到里邊了啊，背景色又填滿了整個(gè)箱子，卻遮不住箱子里的東西，那它就是底面的顏色嘍。

好了，我們?cè)倏紤]啊，你說(shuō) #logo 我們沒(méi)設(shè)置背景吧，可是為啥底下不是白色啥的？確是套在他外邊的箱子的背景色（底面顏色）？這只能說(shuō)明一個(gè)問(wèn)題，div 默認(rèn)的背景色是透明的，也就是這個(gè)快遞箱啊默認(rèn)頂面和底面都是透明的，然后我們看到另外四個(gè)面（上下左右）了么？，好了他們也是透明的！

然后我們?cè)傧氪蠹叶际者^(guò)快遞，易碎品什么的是只用一個(gè)紙箱裝了就行么？不是吧，總是要做防護(hù)措施的，防護(hù)措施不外乎兩種：1、 箱子里面加上填充物；2、箱子外面裹上汽泡紙。那么填充物使得我們的貨物需要一個(gè)比他原本體積更大的箱子，將將好裝下貨物的箱子還怎么放填充物，必須換大箱子，結(jié)果你收到快遞，呀！這東西這么大？結(jié)果是里邊放了填充物。那么這個(gè)填充物就是內(nèi)補(bǔ)，在箱子里邊補(bǔ)充一下嘛～

然后我們?cè)僬f(shuō)外面裹的泡泡紙，裹上泡泡紙會(huì)影響箱子的大小么？不會(huì)，箱子還是那么大，但是裹上泡泡紙他們整體占得面積就大了，這個(gè)紙箱和那個(gè)紙箱之間就產(chǎn)生了距離，這個(gè)距離是多少？就是一個(gè)的泡泡紙厚度加上另一個(gè)泡泡紙的厚度。對(duì)吧？這就是外補(bǔ)。

再想，假如無(wú)論填充物還是泡泡紙，都是透明的，就是看不到啊，當(dāng)然東西還是存在的。那么我們加了填充物（內(nèi)補(bǔ)）之后我們看到的是什么？貨物和箱子之間保持著一定的距離，對(duì)吧，因?yàn)橛锌床灰?jiàn)的填充物在那里呢。加了泡泡紙（外補(bǔ)），我們看到什么？箱子之間產(chǎn)生了距離，因?yàn)榭床灰?jiàn)的泡泡紙?jiān)谒麄冎g呢。

這樣我們就理解了外補(bǔ)和內(nèi)補(bǔ)。我們說(shuō)箱子的底面可以定義顏色，那么周圍的四面（上下左右）可不可以定義呢？可以啊，可以定義顏色還可以定義厚度呢，原本這個(gè)箱子的四壁是沒(méi)有厚度的，存在，但是厚度是 0 ，能理解吧，就是文學(xué)中的薄若蟬翼的意思，有，但是看不到，因?yàn)樘×?，還是透明的。所以當(dāng)我們?cè)O(shè)置了它的厚度和顏色我們就可以看到他了吧？這就是邊框。

那么現(xiàn)在這個(gè)模型建立起來(lái)了，一個(gè)盒子從外往里依次是：

泡泡紙 —— 外補(bǔ)

紙箱壁 —— 邊框

填充物 —— 內(nèi)補(bǔ)

易碎品 —— 內(nèi)容

到這里都很好理解吧，說(shuō)不好理解的那個(gè)去首富家多買點(diǎn)東西就懂了。

這比方打完了，你可得記住，這是理解后面的關(guān)鍵哦！我從來(lái)不說(shuō)代碼是關(guān)健，你理解他才是關(guān)鍵，代碼是可以查的，但是怎么理解他，然后能用他，這是你該掌握的。

然后說(shuō) CSS 屬性：

內(nèi)補(bǔ)：padding

外補(bǔ)：margin

邊框：border

這三個(gè)屬性有些共同點(diǎn)，比如你給他們賦予一個(gè)數(shù)值，那就是四邊都一樣，都是這個(gè)數(shù)值，這很好理解。平均主義，你有我又大家有。

但是事實(shí)上他們都涉及了四個(gè)方向，其實(shí)四個(gè)方向可以分別設(shè)置的，那么我們給四個(gè)數(shù)值的話，比如： margin ：1px 2px 3px 4px; 看到啦，用空格分隔數(shù)值，這四個(gè)數(shù)值怎么對(duì)應(yīng)方向的呢？記住啊，頁(yè)面是從上開(kāi)始寫(xiě)，所以我們從上面開(kāi)始，順時(shí)針旋轉(zhuǎn)，于是就是：上、右、下、左。

這也很好理解，按著順時(shí)針順序挨個(gè)賦值而已，但是要是遇到變態(tài)呢，我就寫(xiě)了倆數(shù)值，那就是第一個(gè)指的是上邊和下邊都是這個(gè)數(shù)值，第二個(gè)值指的是左邊和右邊都是這個(gè)值。這個(gè)是平均分配外加面對(duì)面分果果……反正總而言之還是可以理解的。

但是我要是就給三個(gè)數(shù)值呢？？？

太變態(tài)了！挨個(gè)分，上邊，右邊，下邊，都有了，左邊問(wèn)啊：“那我呢？那我呢？”你也不好意思說(shuō)沒(méi)他的份啊，所以就讓他跟對(duì)面的共用一個(gè)數(shù)值算了。所以三個(gè)值代表：上、左右、下。

然后呢，其實(shí)這三個(gè)屬性都是簡(jiǎn)寫(xiě)屬性，就是把幾個(gè)屬性合在一起寫(xiě)的。要是分開(kāi)寫(xiě)呢？比如：

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

四個(gè)方向可以這樣分別定義，上面的四個(gè)方向分別是上右下左。當(dāng)然，border 的定義要略復(fù)雜一些，因?yàn)樗还庑枰粋€(gè)寬度，還需要邊框的樣式和邊框顏色的定義。這些我們留在以后再說(shuō)。

現(xiàn)在在回到本章的開(kāi)頭，想想我們其實(shí)是要做什么呢？?jī)蛇吜羯弦恍┛瞻?，?duì)吧，但是這些空白還要有背景，其實(shí)就是在 #nav 元素的里邊對(duì)不對(duì)？那就是給 #nav 加內(nèi)補(bǔ)嘍～

你說(shuō)好像我給 #logo 加上外補(bǔ)也能達(dá)到相同的效果，但是你忽略了一個(gè)隱含條件：我們說(shuō)左邊需要空白，其實(shí)如果右邊有內(nèi)容的話你會(huì)說(shuō)右邊也需要留出空白的，而加在 #logo 上的屬性顯然不能滿足這一要求。只有給 #nav 這個(gè)盒子左右兩側(cè)放上填充物才能比較針對(duì)性的解決上述問(wèn)題。

好了，我們廢話了將近三千字，只是為了得出一個(gè)結(jié)論，我們應(yīng)該給 #nav 加上如下屬性：

padding:0 30px;

本章學(xué)習(xí)卡片：卡片 18

本章代碼下載：本章代碼

本書(shū)是收費(fèi)的，不過(guò)交費(fèi)憑自覺(jué)。價(jià)格定義為每人請(qǐng)我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號(hào)：

alay9999@163.com （劉源）

為了讓大家閱讀方便，本書(shū)將在如下站點(diǎn)發(fā)布，但最終內(nèi)容以主站為準(zhǔn)：

• 主站首發(fā)： http://coffee.zji.me/
• Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
• 簡(jiǎn)書(shū)： http://www.jianshu.com/users/d37eaf3de0ff
• 站酷： http://www.zcool.com.cn/u/12927742

未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請(qǐng)聯(lián)系： dms@zji.me