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

編輯每一個職場人都應(yīng)該善于從工作中發(fā)現(xiàn)問題，并整理思路。本文作者經(jīng)歷了一個產(chǎn)品從0到1的設(shè)計過程，通過 CSS 對視覺空間有了一些新的想法，從中總結(jié)出了一些經(jīng)驗，和大家分享。

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

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

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

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

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

一、盒子模型的三維化

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

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

舉個例子