超大芭比出奇蛋多少钱（假如用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轴的二维空间上玩出花来，也无法帮助整个画面里的所有元素形成相对舒适的关系。

举个例子