CSS 布局与“仓库管理”的关系

上周写了一个文章 不会CSS布局可能是“物理”不好 ^[1] ，并在我们团队里做了一个分享。大家普遍反应的问题是，抛出的概念太多有点不好理解。这边重新整理思路和精简概念，再战一次。

当下已经有很多 工具 或者是软件，在努力实现从设计稿到原型稿的转换。但是还没有哪一家可以挺起胸膛说，我们可以 100% 的实现这个需求。

是什么阻止了这两个视觉上几乎一样的稿子之间的转换呢？

在我看来，是因为它们之间的 物理 逻辑不一样。

简单的说，要实现从设计稿到原型稿到转换，其实是要达到突破二者之间 物理 次元的高度。

原型稿设计稿的区别

首先因为我们都太习惯依赖自己都眼睛，导致我们很容易只从一个角度看待问题，忽略了其它的侧面，误以为这两个是一模一样的东西。

然而如果我们换一个视角，结合现实生活中的物理规律，或许能看出一些它们的差别。这边我们转到两个稿子的侧面。

我把设计的过程理解为是在 地板 上作画的过程，元素之间只有 覆盖 关系。也正因为如此，所以我们可以在任意位置起笔，而不用担心影响这会影响到其它元素的布局。

而在我们的 web 环境中，程序员更像是在一块垂直地板的墙面上写代码。这个物理逻辑就变得复杂得多。

首先因为是在墙上操作，所有的元素都会受到地球的引力掉到地板上(当然如果下面的元素如果够大，是可以叠放的)。可是在实际的网页中，我们习惯的是从上往下看的，那这个怎么办呢？

我们可以在整个房间里面放满水（虚线代表透明玻璃板），利用 浮力 让元素往上浮。但是可以看到我们的元素在水的作用下不受控制，顺序都乱了。怎么才能让它们待在我们想让它们存在的位置呢？

很简单，我们用 盒子 把这些文字都装起来。并在盒子之间添加一个透明的玻璃板（图中蓝色虚线部分）进行分离，让元素按照既定的规则摆放在合适的位置。

而这一切和 仓库 的货物 陈列 是几乎是一模一样的。唯一的区别只是这个仓库是在一个充满水的环境中。

我们近似的可以把透明玻璃板，理解为仓库中的架子，然后容器就是我们仓库中的盒子。如果想让某一个货架的背景带颜色，只需要添加一块带颜色的背板即可。

盒状模型

这里的盒子和我们网页的 盒状模型 有什么关系呢？在我看来他们就是一个路数的东西。

对于盒子内外的间隙，这边我们可以理解为快递盒子内部或者之间添加的 防撞泡沫 。 margin ,和 paading 值对应着这些泡沫的厚度。

这边插入一个 box-sizing 的小知识点。很多同学比较搞不清楚，为啥有的浏览器的宽度是带边框和 padding ，有的浏览器的宽度计算又不带边框和 padding 。这个逻辑就有点像你去商店里面买核桃，有的店带壳的有的店不带壳一样。你不能说这其中任何一家的核桃有问题。只是他们的计算方式不一样。浏览器对于宽度的理解也是一样，我们要搞清楚的就是，这个浏览器是怎样的一种方式，或者你直接利用 box-sizing 告诉浏览器我要那种计算方式。

定位

按照以上逻辑，如果想要实现上面这样的层叠效果这么办呢？

这边我们只需要在我们的盒子上套一个 3D 的网，因为我们的视角是在 右侧 的，所以就在我们的眼睛里实现了这个层叠效果。

对于 fixed 可以理解为，我们额外添加了两面都是透明的网状置物架， fixed 就是把元素放到这张网里。

很多小伙伴老是不能理解 relative , absolute , fixed 的关系。虽然他们都是通过 position 去声明，但是 relative 更像是 创建 一个结构，而 absolute , fixed 是把元素放到这个结构中。

• relative 创建一个3D网状结构； • abosolute  把元素放到网里； • top  元素在网中x轴位置； • left  元素在网中y轴位置； • z-index  元素在网中z轴位置； • fixed  把元素放到全局的网里;

还有我们这个网在z轴上好像是无限多级的，就像我们仓库里的置物架可以无线堆叠一样。

浮动布局

下面我们把视角从侧面切回我们的正面。给大家一个更真实的列子来看看，网页中布局的 物理逻辑 。

假设这是一个我们实际的浏览器界面，我们把下面的我爱你三个字放到我们的浏览器中。因为文字受到我们之前说的浮力，所以会往上浮动。

在真实的网络环境中，我们的文字会自动往左对齐。这好比我们把物品放到置物架上的时候，习惯了从左往右开始摆放。因为我们习惯从左往右看一样。

这个逻辑对应的就是我们浏览器的 text-align 这个属性，默认阅读方式是 left 的，当然你也可以设定为 center ， right 等的阅读方式。

为了防止防撞泡沫炸出来，也为了添加防撞泡沫方便。我们通常会把想要放到置物架上的东西都放到盒子里面再放上去。

在浏览器这个仓库中我们多放几个盒子和文字，可以看到这样的效果（虚线代表透明玻璃板）。 block 元素自带置物隔板，所以我们下面的元素即使受到浮力的影响也不会往上跑。可是当我们就是要实现文字环绕的效果怎么办呢？

很简单我们只需要把图中红色的板子去掉就好了。

这边我们把 200px 下面的板子也去掉，可以看到这样的效果。 float 在这里近似的可以看作是拆掉下面的板子，并且为了防止盒子随意飘动，我们还把这个盒子基于方向绑在了置物架上。

如果我们不想要这个环绕的效果，就是要一个左右布局怎么办呢？很简单，我们把之前拆掉的板子加回来。

这里给大家提供了两种不同的加板子的方式。

• 第一种可以少一个盒子，但是能灵活性会差一点。 • 第二种多加了一个盒子，但是可拓展性更好（也更推荐这个方式）。

当然我们网页中除了带隔板的 block 元素。也有不带隔板的 inline-block 元素和 inline 等其它元素（具体可以参考 display 的属性值列表）。因为它们不带隔板，所以通常我们会把这些元素放到带隔板的  block 元素里再放到置物架上。

这边看到的是 Webnovel ^[2] 的详情页顶部的 地貌样式 。大家可以去网上下载  webdeveloper 这个插件（chrome 和 firefox 都有）。选中其中的 infomation => display Topographic Information 可以查看任何一个网页的 盒状结构 。这个工具能帮助设计师，快速的进行布局方向上的视觉走查。

对于像 table ， flex ， grid 布局，原理是相通的。简单的说，是它们拥有比浮动更稳定和灵活的3D网状支架。

总结

如果你的网页中 所有 的元素都是通过定位布局的话，那么这个网页的物理规律，就几乎和我们设计工具中的布局方式一样了。而这是也是为啥 sketch 中 measure 插件能够导出一份和设计稿一摸一样的网页原型稿。可是我们大多数的网页更倾向于文档流的模式，所以我们又得靠 程序员 去再实现一份流的版本。

设计工具中虽然有 打组 这个功能，但是却没有我们网页中盒子力的关系。但是在我们前端程序员眼中，又恰恰是万物都是盒子。用一个连盒子概念都没有的工具，去设计一个全是盒子的世界，可想而知这个难度。

当然现在也有很多设计工具引入了盒子这个概念。但是你给绣房姑娘一把杀猪刀，这也不是那么容易掌握的概念。但我相信人工 AI 的介入，能够打破这个次元，设计稿直接就是原型稿的时刻终会到来，那也正是我们切图仔的下岗之时。

注意：文中的概念只是为了方便大家理解 CSS 布局的一种引喻手法，并不代表网页中实际的逻辑。

BTW我们招人"偏体验前端",要求点 这里 ^[3] 。

References

[1] 不会CSS布局可能是“物理”不好:  https://juejin.im/post/5ca96da86fb9a05e3d0a855d

[2] Webnovel:  https://www.webnovel.com/

[3] 这里:  https://juejin.im/post/5c9f35cbf265da30b8178064