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

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

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

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

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

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

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

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

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

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

塊級元素與盒模型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

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

塊級元素

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

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

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

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

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

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

行內(nèi)元素

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

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

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

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

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

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

本月人氣最高經(jīng)驗類好文揭榜！

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

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

實至名歸第一名！騰訊UI新人內(nèi)部培訓(xùn)教程！
《傳承設(shè)計經(jīng)驗！圖標(biāo)設(shè)計初階的3大關(guā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"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量85萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：