超大芭比出奇蛋多少錢（假如用CSS來逆向推理視覺設計空間）

編輯每一個職場人都應該善于從工作中發現問題，并整理思路。本文作者經歷了一個產品從0到1的設計過程，通過CSS對視覺空間有了一些新的想法，從中總結出了一些經驗，和大家分享。最近幾個月都在忙乎自己的產品，活生生體驗了一把需求-設計-前端開發集成

編輯每一個職場人都應該善于從工作中發現問題，并整理思路。本文作者經歷了一個產品從0到1的設計過程，通過 CSS 對視覺空間有了一些新的想法，從中總結出了一些經驗，和大家分享。

最近幾個月都在忙乎自己的產品，活生生體驗了一把需求-設計-前端開發集成式累死狗的節奏；但，自從離開學校后基本沒怎么敲代碼的半吊子選手，通過這次的自力更生，仿佛在黑暗中找到了光明，變得大徹大悟，牛的一比哈哈哈哈~

簡單交代下事發背景，我這款產品的研發人員構成：就倆人，除了我還有一個iOS工程師，那么按照常識我們都知道，一款產品的上線需要經過「1.確定方向」-「2.具體需求分析與產出」-「3.產品設計」-「4.產品研發」-「5.市場推廣和渠道投放」這些個環節（我分的顆粒度比較粗），才算是勉勉強強的一個合格的流程；所以因為工種原因，我把這些環節做了些許整理分配給我們倆，大致情況如下：

看上圖能發現，其實我們在市場和渠道上需要大量的H5，比如：社群裂變landingpage / 官網 / 公眾號SVG推文等等；但，問題來了，woc我們特么沒有前端啊！萬了！萬了！芭比Q了個屁的了…

在這種情況下，鄙人尋思了半天想出兩個結局，要么冷啟動階段不做宣發，讓這個襁褓中的產品自生自滅（這不行，舍不得）；要么自己coding，每晚拜四阿哥，祈求他干掉每一個bug！換的一方平安，順利渡過冷啟動階段（就這個了！）；

背景就是這樣，于是我開始自己寫吧（邊寫邊查邊百度復制），打算重新跟CSS / JS交個朋友…令人萬萬沒想到的事，就在這個擰巴的過程中我通過 CSS 對視覺空間有了一些新的想法：

一、盒子模型的三維化

說個大家都懂但又繞不過去的概念，網頁設計中常聽的屬性名：內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)，CSS都具備這些屬性。這些屬性我們可以用日常生活中的常見事物——盒子作一個比喻來理解，所以叫它盒子模型，CSS盒子模型就是在網頁設計中經常用到的 CSS 技術所使用的一種思維模型：

雖然所有HTML元素可以看作盒子，但在日常應用時，按照過往的認知，我們通常只對單一的某個元素賦予盒子，給ta添加相關屬性，總體上這種做法確實可以讓一個物體更充實豐富，也因為僅僅是對個體的屬性，也就是說即使在xy軸的二維空間上玩出花來，也無法幫助整個畫面里的所有元素形成相對舒適的關系。

舉個例子