如果本章演示效果無(wú)法正常展示，請(qǐng)至主站查看 http://coffee.zji.me/

我們前邊說(shuō)過(guò) div+css 布局是招聘時(shí)一種懶到家的衡量標(biāo)準(zhǔn)（其實(shí)現(xiàn)在 css 已經(jīng)是前端的基本技能了），就好像招聘文員寫(xiě)上要求會(huì)打字一樣的多余。好吧，雖然這個(gè)說(shuō)法被無(wú)數(shù)人吐槽著，也有些人較真說(shuō)這個(gè)說(shuō)法不科學(xué)等等。但是我們學(xué)習(xí) css 總是繞不開(kāi)要用到 div 的。

其實(shí) div 就是一個(gè)普通的 Html 標(biāo)簽，普通到什么地步呢？他幾乎沒(méi)有任何自帶的樣式，好吧，他就是一個(gè)空白的標(biāo)簽（是樣式是空白的）。一張白紙啊，做什么都好用。我們知道 CSS 的作用就是定義樣式啊，如果我們使用的標(biāo)簽本身自帶了樣式，我們還要用 CSS 對(duì)他進(jìn)行修改，使其達(dá)到我們想要的效果。但是有了 div 就方便了啊，我們只要把我們需要的樣式給他就好了。畢竟新建總是要比修改來(lái)的清爽省心。就好像拿張白紙寫(xiě)字很舒心，但是拿張寫(xiě)過(guò)字的紙過(guò)來(lái)，你要先把文字擦掉再去寫(xiě)你想要的文字，就比較鬧心了。

然后說(shuō)說(shuō)盒模型，這東西搞了個(gè)高大上的名字唬人而已，其實(shí)就是把 div 看成一個(gè)紙箱，那么一個(gè)頁(yè)面很多 div 就是一堆紙箱在房子里排開(kāi)而已。進(jìn)而的，div 的嵌套就是大箱子套小箱子。就這么回事，比如下圖就是本教程主站的盒模型 3D 視圖：

就是像擺積木一樣擺出了一個(gè)頁(yè)面，你說(shuō)要是真的用積木去擺就好了，你就會(huì)了。不過(guò)其實(shí)換做代碼操作也不過(guò)是你用電腦能聽(tīng)懂的語(yǔ)言把各個(gè)積木塊的樣子和位置描述一下罷了。

好像……有點(diǎn)亂哦，你想 div 這個(gè)空白標(biāo)簽看起來(lái)挺好用的，可是要是頁(yè)面上全用他，那可咋區(qū)分啊？我在 CSS 里面寫(xiě)上 div {……} 結(jié)果所有 div 全都一起發(fā)生變化了，這就有點(diǎn)亂了。所以我們要給 div 取名字。

其實(shí)呢，所有的 Html 元素都可以有名字的，這個(gè)名字分為兩種 class 和 id ，用法很簡(jiǎn)單，就是當(dāng)做標(biāo)簽的一個(gè)屬性去寫(xiě)：

<div id="myid"></div>
<div class="myclass"></div>

就是這樣，當(dāng)然他們的名字你隨便取，不過(guò)別搞怪，寫(xiě)中文啊，特殊符號(hào)啊什么的肯定不行。那么你又問(wèn)了，取名字就取名字吧，怎么還兩種呢？這個(gè)也好理解， id 是學(xué)號(hào)，class 是班級(jí)，反正我們初中的英語(yǔ)老師（為什么不是小學(xué)？我們小學(xué)沒(méi)有英語(yǔ)課呀）就是這么告訴我們的。

然后我們?cè)撜f(shuō)說(shuō) id 和 class 的區(qū)別了，他們都可以用來(lái)標(biāo)識(shí)某個(gè)元素，但是他們是有區(qū)別的，否則我們也不用搞兩個(gè)名頭出來(lái)。你知道的，在學(xué)校里一個(gè)學(xué)號(hào)對(duì)應(yīng)一個(gè)學(xué)生，你報(bào)出學(xué)號(hào)就能找出有且只有一個(gè)學(xué)生。所以老師提問(wèn)的時(shí)候愛(ài)叫學(xué)號(hào)，肯定有人被叫到（他叫范圍以外的我們就不鳥(niǎo)他了）而且被叫到的肯定是一個(gè)人，不會(huì)半個(gè)班都站起來(lái)跟他吼：“報(bào)告老師，我不會(huì)！”而班級(jí)呢？一個(gè)班級(jí)可以有很多學(xué)生，這些學(xué)生的特點(diǎn)就是，他們是一個(gè)班的（廢話?。?，一個(gè)班的應(yīng)該就是一個(gè)年級(jí)的，應(yīng)該就是一樣的年齡，一樣的專業(yè)……反正是一群在某方面屬性一致的家伙。

所以， 在同一頁(yè)面內(nèi)， id 是不可以重復(fù)的，不能有兩個(gè)元素具有相同的 id。某學(xué)校的兩個(gè)學(xué)生學(xué)號(hào)一樣，麻煩了，520 號(hào)考上了哈佛，結(jié)果兩個(gè)人，誰(shuí)去誰(shuí)不去？就打起來(lái)了。

但是，在同一頁(yè)面內(nèi)，可以有多個(gè)元素具有相同的 class，三年二班有三十個(gè)同學(xué)，這很正常，校長(zhǎng)說(shuō)，讓三年二班的同學(xué)去表演合唱，那么這三十個(gè)同學(xué)就都在臺(tái)上唱歌，整齊劃一，很好看。

這就是兩者的特點(diǎn)。然后說(shuō)，我們到 CSS 里面怎么寫(xiě)呢？這就涉及到了選擇器的問(wèn)題。先說(shuō)啥是選擇器，我說(shuō)頁(yè)面中某個(gè)元素怎樣怎樣，那么究竟是哪個(gè)元素呢？選擇器就是用來(lái)告訴我們到底是哪個(gè)元素的。比如：

p {
    color:red;
    font-size:12px;
}

這是我們上節(jié)課的代碼，大括號(hào)里是一些 CSS 屬性，我們不去管他，前邊的 p 是說(shuō)這些屬性對(duì)所有的 <p></p> 標(biāo)簽起作用，那么這個(gè) p 就是一個(gè)選擇器。

然后要是想對(duì)鏈接起作用呢？就是 a {……}，于是你看出門(mén)道來(lái)了，原來(lái)選擇器就是元素的標(biāo)簽啊，那么 div {……} 這么寫(xiě)的話，大括號(hào)里的 CSS 屬性肯定就對(duì)所有的 <div></div> 起作用啦？

沒(méi)錯(cuò)，就是醬紫的！你真聰明～

但是你肯定不會(huì)就這么依了我的，剛才我們給 div 取了半天名字，然后到這根本沒(méi)用到啊。放心，我們接著就來(lái)學(xué)習(xí) id 和 class 在 CSS 里面怎么去用。

其實(shí)也很簡(jiǎn)單的，還是上邊那段代碼，我們給里面加一點(diǎn)點(diǎn)文字用來(lái)看效果哦：

<div id="myid">我是文字，用來(lái)看效果的</div>
<div class="myclass">我也是</div>

然后 css 寫(xiě)作：

#myid {
    color:blue;
}
.myclass {
    color:red;
}

效果如下：

這你就明白了，在名字前面加個(gè) # 號(hào)就代表 id，在名字前面加個(gè) . 就代表 class。用 # 來(lái)開(kāi)頭作為編號(hào)什么的我們很常見(jiàn)，這就記住啦。class 是個(gè)很平常的東西，不像 id 那么獨(dú)一無(wú)二，所以這么平凡大眾的屬性就沒(méi)得炫耀了，點(diǎn)個(gè)點(diǎn)低調(diào)的路過(guò)就好。

今天我們認(rèn)識(shí)了 div，還知道了班級(jí)（class），學(xué)號(hào)（id）的特點(diǎn)與寫(xiě)法。明天我們就開(kāi)始試著去寫(xiě)一些東西嘍～

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

本書(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