@不到布 ：獻給那些被代碼折磨的設計師們的第二彈~設計師一直覺得代碼很難搞，一點都不直觀，但其實網頁代碼與PS 文件是有相似之處的，這篇文章就會從這份相似性入手，來談談 HTML 中一個最基礎的概念——內聯元素與塊級元素，而與之對應的 CSS 當中的概念便是行框與盒模型。

上一篇教程地址：《給設計師們的代碼指南！HTML與CSS簡介（一）》

BTW：在網上看到有人說到 HTML 4 + CSS 2.1 與 HTML 5.0 + CSS3 的問題，我會根據需求和實際情況具體說明，而文章整體上是趨向于 HTML 5.0 + CSS3 的，而HTML 5.1 在語義化中所作的努力，我也會盡量寫進來（但是因為個人了解實在有限，所以如果出現錯誤還請不吝賜教）。

簡單來說，如果你的老板/客戶要求你兼容IE6、7、8，那就幾乎無法使用 HTML 5，普通的 HTML 也會出現各種奇怪的問題，作為一個設計師的你也可以直接義正言辭地說，臣妾做不到啊~~（IE6 兼容在世界各地的前端工程師眼里都是眼中釘肉中刺上輩子的仇敵這輩子的冤家）

在正文開始之前，我想先讓你看一眼最上面那張圖，你是不是覺得這種展示方式仿佛在哪里見過？如果你曾經做過應用的banner或者是手機主題，那你甚至有可能用過類似的方式來展現你們的產品。Google前段時間推出的Material Design也提到了布局的縱深感，在其中有這樣一張示意圖：

網頁內的每一個元素，其實就好像是你 PS 文件中的一個圖層，通過 CSS 的手段來定位圖層，就好像你在PS里移動、縮放、旋轉圖層那樣，本質上沒有太多區別。我們都知道 PS 的圖層面板中，越靠上的圖層，在圖片中顯示越“往前”，而在 HTML 中，后出現的元素則會疊在先出現的元素上面。

如果說圖層就是一張張紙片，PS 中的圖層管理是把一張張紙片疊起來，那么 HTML 中每出現一個新元素，就好像是新拿來一張紙，疊在原本的紙片堆上。

以上面那張 Google Material Design 的示意圖為例，其 HTML 代碼簡單寫下來大概是下面這樣（我用div的id屬性值來表示上面圖中的部件名稱，實際使用中請不要這么做）：

我寫這段代碼的用意是展示 HTML 代碼中的元素與實際頁面上的層的關系。在 PS 中，只要圖層之間的上下位置正確就可以，如果兩個部分沒有互相重疊，那么這兩個部分的圖層誰在上誰在下都可以。但是在 HTML 中，除了遵循最基本的“后出現在上面”的原則，【通常】還需要注意，如果兩個部分屬于同級，那么位置靠上的內容要先寫（加粗“通常”兩個字真意味深長啊哈哈）。

在 CSS 的世界中，這種一個個表現得如同圖層一般的 HTML 元素就被稱為塊級元素(Block Element)。

塊級元素與盒模型

塊級元素有兩個默認的表現：

• 在沒有規定寬度的情況下，它的寬度會自動撐滿所能占據的寬度。
• 這些塊會一個接一個的上下放置。

這是我覺得 HTML 元素為數不多的與 PS 圖層不同的地方。PS 的圖層更隨意，HTML 元素受到的約束更多。

塊級元素本身，則遵循著被稱作盒模型（Box Model，也被稱作框模型）的布局方法，你可能已經聽說過padding和margin這兩大基友了，也許還看過不少示意圖，如果你仍然不懂…我也不想丟你一個抽象得只有線的圖，請看：

誒嘿嘿 =v= 我希望這種表述方式你們可以懂~

最中央位于“畫”的部分的，是為Content（內容），你的文字、圖片或者其他子元素都會放在這里。畫框與畫之間的綠色區域（藍色箭頭所示長度分別表示上下左右距離），就是所謂的padding（內邊距），畫框自然就是border（邊框），再往外一層的空白（被染紅了，箭頭所示長度分別表示上下左右距離），就是margin（外邊距），在這里我用深淺不同的紅色表示每一個“元素”的外邊距，其實。在我的理解里，margin就好像元素伸出來的一只手，擬人之后大概是這樣:

…當然了padding、border和margin的寬度、顏色乃至樣式（僅限border）都可以分別設置，家庭的一些無框裝飾畫或者像是莫奈的睡蓮那種三幅一聯這樣的，都是比較典型的三無（左右無內外邊距、無邊框）元素。

元素之所以又是內又是外，里里外外跟洋蔥似的套那么多層，是因為 HTML 元素需要一個定位的基準。在 PS 中，所有的圖層都是以該圖層的左上角的像素點，相對于整個畫布的位置來決定的（你打開窗口 —> 信息 面板，并移動圖層的時候，就能看到這個圖層的位置信息）。然而這種定位方式對于網頁來說，并不現實，而說到定位與布局，那就是 CSS 的另一個非常重要且龐大的部分了，所以我們留到之后再說……

行內元素與行框

我們都知道，PS 里除了普通圖層，文字也會自成一個圖層，當我們想把一段文字中的某兩個字換個顏色，改改字號或者字體，只要選中這兩個字，然后去用文字工具修改就可以了。但是在 HTML 中，這樣不行。你需要告訴瀏覽器，從哪個字開始，到哪個字結束，它們的字號、字體、顏色需要發生變化。

這么說可能有點抽象，那么我們來舉個栗子：

我要告訴所有人這個魚塘被我承包了。

這句話的“所有人”三個字是紅色，而“被我承包了”這段話上出現了刪除線。其對應的 HTML 代碼應該是（在實際寫代碼的時候，這種地方不用分行，我分成5行是為了便于解釋）：

p元素是段落元素，它里面不能放置任何塊級元素，而放置其中span元素及s元素，便被稱為行內元素(Inline Element，也被稱作內聯元素)。另外“我要告訴”、“這個魚塘”、“?！边@三段被分割的文字（標點符號也算文字），瀏覽器會在分析顯示的時候，創造出一個行內“匿名框”，因此這個p元素里實際上擁有5個行內框，這些“框”從左到右依次排列在一起，就變成行框。

在我們學習英語的時候，老師會講到所有的字都要位于某一條線的上方，只有像f\g\j\p\q\y這些字會把尾巴伸到那條線的下方，這條線就被稱為基線（Baseline）。在默認情況下，行內元素及那些行內匿名框都是以基線對齊的（ PS 中有且僅有基線對齊一種方式，所以基線就是我們在 PS 中編輯文字時總能看到的那條線了）。

另外一個困擾無數前端的大問題就是行高（line-height）…不過我覺得對于廣大設計師來說這都不是事兒……對，PS 里也有一個叫做行高的值，如果前面說的框框框框讓你難以理解，把 PS 中的行高直接帶入理解也沒有什么問題（當然具體問題具體分析，高度計算在整個 CSS 布局中都是一個比較令人困擾的問題）。

行框相對于盒模型來說鮮少被提到，因為那些“行內框”實際上也應用了盒模型，只是對于那些非自閉和標簽所構成元素（這種元素被稱為非替換元素（non-replaced elements），意思是說元素所顯示的內容無法通過修改屬性的方式替換）而言，padding、margin乃至width（寬度）屬性都會被無視，這點經常被人忽視而造成問題。

總結

在這篇文章中，我提到了三個非常重要的概念盒模型、塊級元素與行內元素（這三個是一定需要理解和記住的，其它的嘛……不急于現在記住…）。這三個概念都是在 CSS 當中使用的，其中，盒模型是 CSS 當中，對 HTML 元素“圖層化”的處理規范；塊級元素和行內元素，則是 CSS 當中，對 HTML 元素的一種分類方式（HTML 對它的元素有自己的另一種分類方式）。

至于說哪些元素是塊級的，哪些是行內的，哪些元素里面不能有哪些元素這種比較細節的問題，我在這里寫一些常用的…肯定涵蓋不到全部范疇，但是作為一個設計師的你來說，應該是完全夠用了：

塊級元素

最常見的塊級元素便是div，如同 PS 中的圖層 1 或者圖層 765，沒有特殊含義，里面可以套各種各樣的元素。

有序列表ol、無序列表ul也是塊級元素，而他們的子元素只能是列表項li元素，li元素是塊級元素，但是li元素里只能放行內元素（和p元素一樣）。

h1~6是標題專用的標簽，還有引用blockquote，這兩個是塊級元素，而其里面只能放行內元素。

表格table及其相關的行、列、單元格元素在表現上你可以當作它是一個塊級元素，但它整體的樣式解析方式非常特殊。本著樣式追隨內容的原則，在需要展現表格的地方使用表格元素，不要把表格當作樣式或者布局的工具。

表單form，語義化的塊級元素，在 HTML 中表示這是個表單元素，而在 CSS 中，他跟div元素一樣，里面放什么都行。

HTML 5 中新增了一批塊級元素，主要是為了 HTML 語義化。包括header（頁頭）、footer（頁腳）、nav（導航）、article（文章）、aside（側邊欄）、section（節選）。它們對其子元素都沒有強制性的要求，只有article和section需要內嵌一個標題元素，這同樣是出于語義化的考慮。如果你不知道怎么用，可以不用理會它們，統統用div（除非你是個想轉為前端的設計師）。

行內元素

任何一段沒有被標簽包圍的文本都會被視為一個行內元素。

超鏈接a是一個典型的行內元素（但是實際應用中，經常會用超鏈接元素來做一個按鈕（需要padding、margin），這在 CSS 當中也是可行的，以后再說）。

span元素在行內元素中的地位與div在塊級元素中的地位相同，萬金油的行內元素。

看起來變粗的b與strong，以及看起來變斜體的i與em。這兩組元素在HTML 5中嚴格規定了語義，b表示無意義的加粗（比如產品名，或者僅僅是為了排版），i表示在文章中突出不同意見或語氣（分類、術語、諺語等等）,em表示一般的強調，strong表示超級強調的強調（……）。

圖片img、輸入框input、下拉菜單select、文本框textarea。這幾個元素作為行內元素，但卻可以設置padding、margin（因為它們是替換元素）

讓字變小的small（讓字變大的big元素雖然也是行內元素，但是 HTML 5 已經將其廢止了）、上標sup、下標sub、短引用q、注音ruby、換行br等等都是行內元素。

本月人氣最高經驗類好文揭榜！

第三名！寫出頂尖文案的最佳教程！
《年度最佳教程！7招教你寫出互聯網頂尖文案！》

第二名！用最簡單的方法教你做最好海報！
《設計易容術！如何設計一張高品位高水準的海報？》

實至名歸第一名！騰訊UI新人內部培訓教程！
《傳承設計經驗！圖標設計初階的3大關鍵入門知識點！》

原文地址：hikarievo
作者：@不到布

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量85萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：