Blog

簡介

上次介紹了基本的html tag，這次來講一下，html中很重要的巢狀結構。如果有仔細看的話，應該會發現html是一層一層包住的，最外層是html tag，再來有body tag，還有我們寫的tag，包括h1 ~ h6之類的。

這次，我們要介紹兩個很重要的東西，分別是 div 和 span tag。這兩個 tag 在 html 之中很常出現，並清楚的標示我們的html結構。要學好網頁前端，一定要搞清楚他們的功能和差異性。

開始囉！

尿布和啤酒，是否該放一起賣？

談到很紅的big data，就不得不介紹一個經典的例子——尿布和啤酒。美國的零售業者沃爾瑪，裡頭的資料科學家在分析購買數據時，發現了一個很重要的事實。每到星期五晚上，尿布和啤酒的銷售量有正向關，而且同時提升。

蛤？尿布和啤酒？這個組合也太奇怪了吧。

你沒聽錯，就是尿布和啤酒。

該不會是星期五會定期舉行什麼奇怪的尿布啤酒party吧。

Nice Guess! 不過有其它原因，我們繼續聽下去。

這實在是不太尋常。經過調查之後，才知道，原來星期五晚上，爸爸們會到超市們幫baby買尿布，然後順便買些啤酒，回家看球賽。於是，沃爾瑪調整銷售策略，把啤酒和尿布放在同一區，果不其然，尿布和啤酒的銷量都大大的提升。

所以，這和我們的網頁架構有什麼關係？

當然我們這篇不是要講大數據多麼威猛。只是你是否在寫網頁時，發現常常會有某些東西，像是啤酒和尿布一樣，該被放在一起的？譬如一篇文章，便含有標題、副標題，文章預覽、日期……。若是如此，那我們就用個div把他給包起來，他們就算是一個區塊。請看下圖，每一個紅色包起來的範圍，都算是一個區塊。再仔細看一下左邊的文章，還可以發現大區塊裡有很多小區塊，分別包含標題、副標題，文章預覽、日期，這也是div包起來的喔。

把它包成區塊有什麼好處呢？好處一，設定css方便。如果我們要為這個區塊設定樣式，那我們只要在這個div區塊加上css即可，其它的地方就不會被動到。如果我們一次要給很多類似的區塊設定個樣式，設個 id 或 class（id 和 class是什麼，我們下一篇會提到），全部類似的區塊就變為相同樣式了。

準備好囉，我們要把啤酒和尿布包在一起賣了。讓我們看看下面的範例，css的語法部分看不懂沒關係：

看，我們用div隔出一格一格的商品。每格商品縱然內容物的顏色不同，還是有相同的橘色外包裝。看一下css的部分，甚至可以發現我們只用一個goods的class，就把我們尿布和啤酒套裝商品的外包裝給設定好了。這是 div + css的威力。

我們也設定了尿啤組合（打字太累了，以下將尿布啤酒組合簡稱尿啤組合）的長寬，皆為100px。因此，你可以試著把 width: 100px 和 height: 100px 都拿掉看看，或者將其改為不同的數值。

商品的「排列」也是很重要的！

除了統一設定樣式之外，包成div或span的另一個原因是為了排列。我們剛剛還沒把我們的尿啤組合上架，現在可以來把它們上一下架了。我另外將尿啤組合們外再包一個div，他的class設定成shelf，代表的是商品架。背景是水藍色，如果你想給他改個底色的話，就把 background: cyan 的顏色換一個就好了。

下面 demo 的畫面會有一點長，點進去 codepen 的網頁後，建議按右上角的Change View，改成左右顯示的模式。會比較好對照。雖然程式碼有一點多，但主要都是重複的程式碼。關注的重點放在 css 的 goods1、goods2、goods3 這些class就好。

goods1 使用的是div，而div預設的排列方式就是一塊一塊的，對應到的的css屬性是display-block。goods2 使用的是span，而span的預設排列方式 display: inline。為了測試看看div和span的預設排列屬性，你可以將 goods1 和 goods2 前面的註解拿掉，會發現排列沒有改變。display常用的屬性除了這兩個外，也有另一種是display: inline-block。以下是這三種class的程式碼，我把它剝離出來，方便客倌們看。

.goods1{
 //display: block;
}
.goods2{
 //display: inline;
}
.goods3{
 display: inline-block;
}

所謂的block，就是「塊狀」的意思。設定此屬性後，div會直接佔據一塊，而「所有 block 屬性的兄弟元件」，在這邊是div，會一個佔一行。inline則是代表「單行」的意思。設定此屬性後，「所有inline屬性的兄弟元件」，在這邊也就是span，會盡可能的擠到同一行。至於inline-block，則是會把所有包含這屬性的，都盡量排到同一行，但是又保留div塊狀的特色。如果容器內含display-block屬性的元件過多，超過容器的寬度（這裡是500px），就會排到下一行去。inline-block 這個屬性，可是非常的好用。

這也是為什麼我要別於goods，另外設 goods1 ~ goods3 的 class。因為我只要設定這些的css，不同商品架的商品，就全部按照我要的排列方式排列囉。

不對啊，你說goods2是用span包起來的，但我看他還是塊狀排列耶。而且為什麼底色都不見了？

哈哈，你講到重點了，讓我來解釋一下。

goods2 的 span 之所以分成一行一行，且底色不見的原因，是因為被它包住的h3。h3預設的屬性也是block，所以會在span內排成兩行。然而 display: inline 的 tag 本來就是設計成單行顯示的，因此在inline 的 tag 裡面包一個 block ，是一個不好的寫法。想要讓 span 的顏色顯示正常，那我們就得把 h3 的預設屬性換掉，換成 inline 就可以了。我已經在程式碼最底部幫你註解起來了，只要把註解拿掉就好囉！

當然，因為這個 h3 的 css 屬性是設定給所有的 h3，因此把註解拿掉後，goods1 和 goods3也會受到影響，你可以觀察看看差異性喔！

上一篇曾經談到 tag 預設屬性的問題，這裡剛好可以再複習一下。strong、b、em、span、img這類的tag，都是預設 display: inline 的，而其它如 h1~h6、ul、ol、blockquote，這種的都是預設 display: block的。想要更改也可以，只要在 css 的地方做更改就好囉。

觀察網頁結構

當然囉，現實中的網頁結構可沒有這麼簡單。話雖如此，仍然是一層包一層的結構。要看網頁結構的話，可以使用 chrome developer 或 firefox 的開發者工具。此外，firefox 也提供一個功能，可以把網頁的結構立體化。請按照以下步驟，開啟它。

工具->網頁開發者->檢測器->右上角立體盒子圖案

這樣子就可以了，以下是Google的結構圖，你看，簡單的網頁就這麼多層了，有沒有覺得當前端工程師很興奮呢？

結語

這次介紹的 div 和 span，是html 主要的架構。身為一個前端工程師要絕對要弄清楚的。懂了這些後，對於html的排版有很大的幫助。但是，排版是很吃經驗的一項工作，唯有多寫多做多看，才能讓架構更完美，也更具有彈性。

嘿，你下次要給我講一下 css 的 class在幹麻，今天講了一堆class的東西，我有點霧煞煞。

好的，沒問題！所以可以給我來罐啤酒嗎？

粉絲專頁

https://www.facebook.com/noootownnotes/

關於我：

我是沒一村，專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章：

• 沒一村書單
• [程式設計] 全端工程師學習地圖（手機端、後端一）
• [程式設計] 全端工程師學習地圖（通用 + 前端）
• [科技職場] 為什麼選擇新創公司工作 —— 風險和報酬比較
• [經驗談] 該唸研究所還是選擇就業？
• [科技職場] 早期新創股票分配和 incentive 的重要性
• [美國經驗談] 美國人為什麼不戴口罩