編者按：設計師應該學習哪些前端基礎知識，才能和工程師順暢溝通？本文用深入淺出的案例，幫你快速掌握基礎的前端開發術語。

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

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

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

想一想，從“這個和那個能不能分開一點“這種開發眼里極富鄉土氣息的白話到“兩個字段的 margin 增加到 20”這種專業的邏輯語言，中間可以省下多少寶貴的時間啊讓我們去充（xiao）電（sa）啊。

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

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

更多基礎教程：

一、Html、Css 和 JavaScript

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

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

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

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

但是，問題來了——

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

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

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

這時，我們再返回剛剛的div，略微修改下圖片及文字內容，就變為了站酷作品坑位的基本樣式：

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

二、盒子模型

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

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

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

類比到盒子模型：

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

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

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

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

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

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

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

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

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

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

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

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

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

四、總結

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