編者按：設(shè)計師應(yīng)該學(xué)習(xí)哪些前端基礎(chǔ)知識，才能和工程師順暢溝通？本文用深入淺出的案例，幫你快速掌握基礎(chǔ)的前端開發(fā)術(shù)語。

在實際項目中，直至開發(fā)扣完最后一行代碼之前，UI 所輸出的視覺稿其實并不算是產(chǎn)品的最終形態(tài)。因此，設(shè)計-開發(fā)這一上下游的協(xié)作對你的視覺落地起著決定性的重要影響。

但是！由于工種本身的性質(zhì)，我們和開發(fā)之間的溝通是個棘手又麻煩的歷史遺留難題。

我們一方面厭惡那些“div”“margin”類的開發(fā)術(shù)語，另一方面又渴望開發(fā)能夠意會我們的稿子，像復(fù)刻機一樣完美得把它實現(xiàn)出來，但排除那些極少數(shù)本身有很好審美的開發(fā)外，這件事本身就是個可遇不可求的幻想。因此，理解一些開發(fā)術(shù)語和開發(fā)的工作流，對于設(shè)計-開發(fā)的協(xié)作效率的提升無疑是極為有效的。

想一想，從“這個和那個能不能分開一點“這種開發(fā)眼里極富鄉(xiāng)土氣息的白話到“兩個字段的 margin 增加到 20”這種專業(yè)的邏輯語言，中間可以省下多少寶貴的時間啊讓我們?nèi)コ洌▁iao）電（sa）啊。

我知道你們不想去 W3school 吭哧吭哧學(xué)代碼，所以我花了大量時間研究了它們，并主動請教了幾位開發(fā)，再用極具想象力的方法帶各位熟悉代碼的世界、以及開發(fā)小哥的日常~各位讀完之后，基本有能力解決 90%因為溝通產(chǎn)生的難題！

歐克，廢話不多說，雷斯夠！

更多基礎(chǔ)教程：

一、Html、Css 和 JavaScript

Html 是最基本的“骨架”代碼，術(shù)語叫超文本標(biāo)記語言。形象點兒說，這玩意兒主要是用來貼名牌的。我們的瀏覽器其實是個眼神和脾氣都不太好的門衛(wèi)大爺（原諒這個蹩腳的比喻），元素們只有添上他們獨有的名牌，才能被它認(rèn)出來并允許進入，大部分還得正反都貼。

比如，a、p和 img 就分別代表了鏈接、段落和圖片的名牌。一旦有個家伙沒貼，就立刻 OUT 出局。但是，他們懶啊，自己不想動，這時就輪到我們的正義使者——開發(fā)小哥閃亮登場了！

辛勤的開發(fā)小哥用神奇的 Html 語言，為每個懶貨貼上屬于他們自己的名牌，進入瀏覽器大閘的行為也就變得名正言順。

左下圖就是用 Html 貼上名牌（標(biāo)簽）的鏈接、段落和圖片，右下圖就是他們在瀏覽器中的反映。

但是，問題來了——

這些倒霉孩子實在是太雜太多了，成天四處亂跑雜亂無章，為了將他們進行管理和約束，開發(fā)小哥們就用 div 這類標(biāo)簽建立了一個個班級，按照設(shè)計師給出的視覺稿，把關(guān)系更相近、密切的元素們劃分到一個班級去，從而實現(xiàn)對元素們的高效管理、收納。

然后，開發(fā)小哥再根據(jù)視覺稿中的具體樣式，用css（層疊樣式表）來裝扮這些元素。

首先在代碼中加入<style>這個標(biāo)簽來提前定義一個樣式表，然后在花括號{ }寫入元素的屬性和對應(yīng)的值（比如一個字號14px的段落，用css語法表示就是p { font-size:14px }）。下圖就分別為div中的三個元素進行了樣式聲明。

這時，我們再返回剛剛的div，略微修改下圖片及文字內(nèi)容，就變?yōu)榱苏究嶙髌房游坏幕緲邮剑?/p>

最后，開發(fā)小哥根據(jù)頁面交互以及動效，用JavaScript給元素們下達指令，命令哪些元素會隨著用戶的觸發(fā)產(chǎn)生交互動作，哪些元素可以跳街舞來展現(xiàn)酷炫的動畫！

二、盒子模型

我們視覺稿被前端還原后所出現(xiàn)的排版問題，根本原因就在于盒子模型中的padding以及margin數(shù)值與視覺稿出現(xiàn)差異。這時你可能又要問，盒子模型又是個啥？

為了方便理解，我先舉個生活最常見的栗子~

雙十一剁手后，我們會從賣家那里收到一個又一個的快遞。賣家為了保護商品往往會在快遞盒里面再包裹一層防震防碎的填充物。

類比到盒子模型：

商品本身就是最中間的content；

保護商品的填充物就是覆蓋于content外的padding；

而快遞盒本身就是padding上的border；

兩個快遞盒之間的間距就是margin。

根據(jù)他們在盒子中所在的方位，可以在后面加上top、left、bottom和right的后綴。

所有的元素、元素們組成的div模塊甚至模塊組成的整體，在css其實都是盒子模型。還是拿剛剛的作品坑位舉例。

將整個坑位模塊作為盒子時，這時這個盒子只存在做區(qū)隔的padding，沒有border和margin。

而將單個元素作為盒子時，圖片和段落僅僅擁有content，標(biāo)題鏈接除了content外還會多出一個margin-top。

三、開發(fā)到底是如何還原視覺稿的？

到這里，你應(yīng)該對這些玩意兒有了基本的概念。你又想問了：我get到這些東西了，但是實際項目中開發(fā)到底是怎么還原的視覺稿的？

拿線上的商品詳情頁舉例，如果開發(fā)拿到這個視覺稿后，他會怎么去一步步得實現(xiàn)？

為方便閱讀，我匯總到一張大圖中，按照開發(fā)的工作流將這個布局過程分為了四步——

說白了，整個骨架布局的過程就像俄羅斯套娃，一級級向下嵌套，直到最小的元素。之后再進行具體樣式的填充。（不過這個順序并不是固定的，詢問過周圍的同事，也有喜歡布局和樣式同時進行的，完全看開發(fā)自己的習(xí)慣）

四、總結(jié)

知道這些基礎(chǔ)的代碼概念，盒子模型和開發(fā)的工作流其實就夠用了，閑著沒事可以自己打開網(wǎng)頁，右鍵“檢查”打開開發(fā)者模式點點元素，查看對應(yīng)的代碼、盒子！就醬！