@不到布 ：獻(xiàn)給那些被代碼折磨的設(shè)計(jì)師們的第二彈~設(shè)計(jì)師一直覺(jué)得代碼很難搞，一點(diǎn)都不直觀，但其實(shí)網(wǎng)頁(yè)代碼與PS 文件是有相似之處的，這篇文章就會(huì)從這份相似性入手，來(lái)談?wù)?HTML 中一個(gè)最基礎(chǔ)的概念——內(nèi)聯(lián)元素與塊級(jí)元素，而與之對(duì)應(yīng)的 CSS 當(dāng)中的概念便是行框與盒模型。

上一篇教程地址：《給設(shè)計(jì)師們的代碼指南！HTML與CSS簡(jiǎn)介（一）》

BTW：在網(wǎng)上看到有人說(shuō)到 HTML 4 + CSS 2.1 與 HTML 5.0 + CSS3 的問(wèn)題，我會(huì)根據(jù)需求和實(shí)際情況具體說(shuō)明，而文章整體上是趨向于 HTML 5.0 + CSS3 的，而HTML 5.1 在語(yǔ)義化中所作的努力，我也會(huì)盡量寫(xiě)進(jìn)來(lái)（但是因?yàn)閭€(gè)人了解實(shí)在有限，所以如果出現(xiàn)錯(cuò)誤還請(qǐng)不吝賜教）。

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

在正文開(kāi)始之前，我想先讓你看一眼最上面那張圖，你是不是覺(jué)得這種展示方式仿佛在哪里見(jiàn)過(guò)？如果你曾經(jīng)做過(guò)應(yīng)用的banner或者是手機(jī)主題，那你甚至有可能用過(guò)類(lèi)似的方式來(lái)展現(xiàn)你們的產(chǎn)品。Google前段時(shí)間推出的Material Design也提到了布局的縱深感，在其中有這樣一張示意圖：

網(wǎng)頁(yè)內(nèi)的每一個(gè)元素，其實(shí)就好像是你 PS 文件中的一個(gè)圖層，通過(guò) CSS 的手段來(lái)定位圖層，就好像你在PS里移動(dòng)、縮放、旋轉(zhuǎn)圖層那樣，本質(zhì)上沒(méi)有太多區(qū)別。我們都知道 PS 的圖層面板中，越靠上的圖層，在圖片中顯示越“往前”，而在 HTML 中，后出現(xiàn)的元素則會(huì)疊在先出現(xiàn)的元素上面。

如果說(shuō)圖層就是一張張紙片，PS 中的圖層管理是把一張張紙片疊起來(lái)，那么 HTML 中每出現(xiàn)一個(gè)新元素，就好像是新拿來(lái)一張紙，疊在原本的紙片堆上。

以上面那張 Google Material Design 的示意圖為例，其 HTML 代碼簡(jiǎn)單寫(xiě)下來(lái)大概是下面這樣（我用div的id屬性值來(lái)表示上面圖中的部件名稱(chēng)，實(shí)際使用中請(qǐng)不要這么做）：

我寫(xiě)這段代碼的用意是展示 HTML 代碼中的元素與實(shí)際頁(yè)面上的層的關(guān)系。在 PS 中，只要圖層之間的上下位置正確就可以，如果兩個(gè)部分沒(méi)有互相重疊，那么這兩個(gè)部分的圖層誰(shuí)在上誰(shuí)在下都可以。但是在 HTML 中，除了遵循最基本的“后出現(xiàn)在上面”的原則，【通?！窟€需要注意，如果兩個(gè)部分屬于同級(jí)，那么位置靠上的內(nèi)容要先寫(xiě)（加粗“通常”兩個(gè)字真意味深長(zhǎng)啊哈哈）。

在 CSS 的世界中，這種一個(gè)個(gè)表現(xiàn)得如同圖層一般的 HTML 元素就被稱(chēng)為塊級(jí)元素(Block Element)。

塊級(jí)元素與盒模型

塊級(jí)元素有兩個(gè)默認(rèn)的表現(xiàn)：

• 在沒(méi)有規(guī)定寬度的情況下，它的寬度會(huì)自動(dòng)撐滿所能占據(jù)的寬度。
• 這些塊會(huì)一個(gè)接一個(gè)的上下放置。

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

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

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

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

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

元素之所以又是內(nèi)又是外，里里外外跟洋蔥似的套那么多層，是因?yàn)?HTML 元素需要一個(gè)定位的基準(zhǔn)。在 PS 中，所有的圖層都是以該圖層的左上角的像素點(diǎn)，相對(duì)于整個(gè)畫(huà)布的位置來(lái)決定的（你打開(kāi)窗口 —> 信息 面板，并移動(dòng)圖層的時(shí)候，就能看到這個(gè)圖層的位置信息）。然而這種定位方式對(duì)于網(wǎng)頁(yè)來(lái)說(shuō)，并不現(xiàn)實(shí)，而說(shuō)到定位與布局，那就是 CSS 的另一個(gè)非常重要且龐大的部分了，所以我們留到之后再說(shuō)……

行內(nèi)元素與行框

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

這么說(shuō)可能有點(diǎn)抽象，那么我們來(lái)舉個(gè)栗子：

我要告訴所有人這個(gè)魚(yú)塘被我承包了。

這句話的“所有人”三個(gè)字是紅色，而“被我承包了”這段話上出現(xiàn)了刪除線。其對(duì)應(yīng)的 HTML 代碼應(yīng)該是（在實(shí)際寫(xiě)代碼的時(shí)候，這種地方不用分行，我分成5行是為了便于解釋?zhuān)?/p>

p元素是段落元素，它里面不能放置任何塊級(jí)元素，而放置其中span元素及s元素，便被稱(chēng)為行內(nèi)元素(Inline Element，也被稱(chēng)作內(nèi)聯(lián)元素)。另外“我要告訴”、“這個(gè)魚(yú)塘”、“。”這三段被分割的文字（標(biāo)點(diǎn)符號(hào)也算文字），瀏覽器會(huì)在分析顯示的時(shí)候，創(chuàng)造出一個(gè)行內(nèi)“匿名框”，因此這個(gè)p元素里實(shí)際上擁有5個(gè)行內(nèi)框，這些“框”從左到右依次排列在一起，就變成行框。

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

另外一個(gè)困擾無(wú)數(shù)前端的大問(wèn)題就是行高（line-height）…不過(guò)我覺(jué)得對(duì)于廣大設(shè)計(jì)師來(lái)說(shuō)這都不是事兒……對(duì)，PS 里也有一個(gè)叫做行高的值，如果前面說(shuō)的框框框框讓你難以理解，把 PS 中的行高直接帶入理解也沒(méi)有什么問(wèn)題（當(dāng)然具體問(wèn)題具體分析，高度計(jì)算在整個(gè) CSS 布局中都是一個(gè)比較令人困擾的問(wèn)題）。

行框相對(duì)于盒模型來(lái)說(shuō)鮮少被提到，因?yàn)槟切靶袃?nèi)框”實(shí)際上也應(yīng)用了盒模型，只是對(duì)于那些非自閉和標(biāo)簽所構(gòu)成元素（這種元素被稱(chēng)為非替換元素（non-replaced elements），意思是說(shuō)元素所顯示的內(nèi)容無(wú)法通過(guò)修改屬性的方式替換）而言，padding、margin乃至width（寬度）屬性都會(huì)被無(wú)視，這點(diǎn)經(jīng)常被人忽視而造成問(wèn)題。

總結(jié)

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

至于說(shuō)哪些元素是塊級(jí)的，哪些是行內(nèi)的，哪些元素里面不能有哪些元素這種比較細(xì)節(jié)的問(wèn)題，我在這里寫(xiě)一些常用的…肯定涵蓋不到全部范疇，但是作為一個(gè)設(shè)計(jì)師的你來(lái)說(shuō)，應(yīng)該是完全夠用了：

塊級(jí)元素

最常見(jiàn)的塊級(jí)元素便是div，如同 PS 中的圖層 1 或者圖層 765，沒(méi)有特殊含義，里面可以套各種各樣的元素。

有序列表ol、無(wú)序列表ul也是塊級(jí)元素，而他們的子元素只能是列表項(xiàng)li元素，li元素是塊級(jí)元素，但是li元素里只能放行內(nèi)元素（和p元素一樣）。

h1~6是標(biāo)題專(zhuān)用的標(biāo)簽，還有引用blockquote，這兩個(gè)是塊級(jí)元素，而其里面只能放行內(nèi)元素。

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

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

HTML 5 中新增了一批塊級(jí)元素，主要是為了 HTML 語(yǔ)義化。包括header（頁(yè)頭）、footer（頁(yè)腳）、nav（導(dǎo)航）、article（文章）、aside（側(cè)邊欄）、section（節(jié)選）。它們對(duì)其子元素都沒(méi)有強(qiáng)制性的要求，只有article和section需要內(nèi)嵌一個(gè)標(biāo)題元素，這同樣是出于語(yǔ)義化的考慮。如果你不知道怎么用，可以不用理會(huì)它們，統(tǒng)統(tǒng)用div（除非你是個(gè)想轉(zhuǎn)為前端的設(shè)計(jì)師）。

行內(nèi)元素

任何一段沒(méi)有被標(biāo)簽包圍的文本都會(huì)被視為一個(gè)行內(nèi)元素。

超鏈接a是一個(gè)典型的行內(nèi)元素（但是實(shí)際應(yīng)用中，經(jīng)常會(huì)用超鏈接元素來(lái)做一個(gè)按鈕（需要padding、margin），這在 CSS 當(dāng)中也是可行的，以后再說(shuō)）。

span元素在行內(nèi)元素中的地位與div在塊級(jí)元素中的地位相同，萬(wàn)金油的行內(nèi)元素。

看起來(lái)變粗的b與strong，以及看起來(lái)變斜體的i與em。這兩組元素在HTML 5中嚴(yán)格規(guī)定了語(yǔ)義，b表示無(wú)意義的加粗（比如產(chǎn)品名，或者僅僅是為了排版），i表示在文章中突出不同意見(jiàn)或語(yǔ)氣（分類(lèi)、術(shù)語(yǔ)、諺語(yǔ)等等）,em表示一般的強(qiáng)調(diào)，strong表示超級(jí)強(qiáng)調(diào)的強(qiáng)調(diào)（……）。

圖片img、輸入框input、下拉菜單select、文本框textarea。這幾個(gè)元素作為行內(nèi)元素，但卻可以設(shè)置padding、margin（因?yàn)樗鼈兪翘鎿Q元素）

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

本月人氣最高經(jīng)驗(yàn)類(lèi)好文揭榜！

第三名！寫(xiě)出頂尖文案的最佳教程！
《年度最佳教程！7招教你寫(xiě)出互聯(lián)網(wǎng)頂尖文案！》

第二名！用最簡(jiǎn)單的方法教你做最好海報(bào)！
《設(shè)計(jì)易容術(shù)！如何設(shè)計(jì)一張高品位高水準(zhǔn)的海報(bào)？》

實(shí)至名歸第一名！騰訊UI新人內(nèi)部培訓(xùn)教程！
《傳承設(shè)計(jì)經(jīng)驗(yàn)！圖標(biāo)設(shè)計(jì)初階的3大關(guān)鍵入門(mén)知識(shí)點(diǎn)！》

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

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