<div id="boxes">
    <div class="box">
        <h3>我是第一個(gè)盒子</h3>
        <p>是的，沒錯(cuò)的，十分確認(rèn)的，我是第一個(gè)盒子。</p>
    </div>
    <div class="box">
        <h3>反正我就是個(gè)盒子</h3>
        <p>是的，沒錯(cuò)的，十分確認(rèn)的，我就是一個(gè)盒子。</p>
    </div>
    <div class="box">
        <h3>我是盒子我驕傲</h3>
        <p>盒子怎么了，你不能瞧不起盒子的，我們也有自尊。</p>
    </div>
</div><!-- #boxes End -->

然后懶得去看效果，用鼻子想也知道什么德行，一行一個(gè)唄，你可以試一下，我不攔著你，反正試試不要錢，還能加深理解。最可怕的就是你們這些人啊，跟我別的沒學(xué)，就學(xué)會(huì)了我的懶，根本不想動(dòng)手，那怎么學(xué)得會(huì)啊。你看我雖然懶，但是寫教程還是不含糊的嘛~~（自我夸獎(jiǎng)一下感覺真好）

現(xiàn)在開始猜著寫 CSS 樣式哦。其實(shí)吧，想想也知道 #boxes 跟 .post-content 差不多啦，都是一個(gè) 960px 寬，居中對齊的區(qū)域，用來裝一些內(nèi)容。

所以：

#boxes {
    width: 960px;
    margin: 0 auto;
}

為什么沒有高度啊？因?yàn)槲乙膊恢浪卸喔甙?，其?shí)我管他多高呢，讓內(nèi)部元素把他撐起來就好了。

然后是什么？橫排橫排，那些 .box 要橫排的，然后呢？橫排之后你的給個(gè)寬度啊，沒有寬度他就根據(jù)元素內(nèi)容自動(dòng)寬度了。

#boxes .box {
    float: left;
    width: 300px;
    padding: 10px;
}

關(guān)于這個(gè)寬度很多同學(xué)不會(huì)計(jì)算，其實(shí)很簡單啊，960px 的寬度，平分三份，每份就是 320px，所以每個(gè) .box 所占的寬度就是 320px。但是我們不能讓他們緊緊貼在一起啊，所以就給他們加內(nèi)補(bǔ)（外補(bǔ)也行），但是這個(gè)內(nèi)補(bǔ)的寬度也要從這 320px 里出，所以左右兩邊各 10px，中間的內(nèi)容寬度就只剩下 300px 了。至于垂直方向上，我們對高度沒什么限制，所以就不需要這么麻煩的計(jì)算了。

現(xiàn)在終于可以去看看效果了，然后我們再根據(jù)效果做各種修飾。雖然我做的并不好看，但是每次看效果之前還是有一種莫名的興奮啊~

橫排的效果已經(jīng)如我們所愿了啊。現(xiàn)在就是美觀度的問題，這個(gè)問題很簡單，也很復(fù)雜，好辯證的講法。所以……反正我是沒有什么審美的，簡單設(shè)置一下好了。

然后我就給 CSS 加上了如下內(nèi)容：

#boxes .box h3 {
    font-size: 24px;
    font-weight: 300;
    text-align: center;
}

然后看一下效果：

還算看得過去，當(dāng)然底下的描述文字再多幾行看起來就更舒服了，我就不加了，當(dāng)然你要是覺得這幾個(gè)格子之間的距離太近的話，你也可以把前邊我們設(shè)置的內(nèi)補(bǔ)適當(dāng)進(jìn)行調(diào)整，嗯，修改數(shù)值多做實(shí)驗(yàn)，是有助于加深你的理解的。

然后呢，我們那個(gè)審美奇葩的老板說看著太空了，要再加點(diǎn)什么圖，看起來更加高大上一些，所以我們來試試給每個(gè)格子都加上一個(gè)圖標(biāo)。

#boxes .box {
    float: left;
    width: 300px;
    padding: 138px 10px 10px;
    margin-top: 30px;
    background: url(../images/box-icon.png) center 10px no-repeat;
}

也沒什么復(fù)雜的，其實(shí)前邊都講過，注意讓背景居中，不重復(fù)，然后在元素頂部增加內(nèi)補(bǔ)給圖標(biāo)留出位置就好?？匆幌滦Ч?/p>

當(dāng)然其實(shí)同理的，你也可以把圖標(biāo)設(shè)置在底下。比如改做：

#boxes .box {
    float: left;
    width: 300px;
    padding: 10px 10px 138px 10px;
    margin-top: 30px;
    background: url(../images/box-icon.png) center bottom no-repeat;
}

效果如下：

當(dāng)然了，你也可以給他們分別設(shè)置圖標(biāo)，或者用 img 標(biāo)簽也是完全可以的，我就不一一舉例了，不過你最好都動(dòng)手試一試哦。

然后我們丟掉了一個(gè)什么？清除浮動(dòng)！浮動(dòng)用過要清除，新手一定要記得，否則很容易造成奇葩問題讓自己迷惑。去加一個(gè) <div class="clear"></div> 吧，加在哪里的問題大家可以下載源代碼來研究啦~

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

本章代碼下載：本章代碼

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

alay9999@163.com （劉源）

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

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

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

上一篇：第十八章導(dǎo)航條（三）下一篇：第六十章開始玩玩

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

第三十二章 一些格子

第三十二章一些格子