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

上周写了一个文章不会CSS布局多是“物理”很差，并在咱们团队里作了一个分享。你们广泛反应的问题是，抛出的概念太多有点很差理解。这边从新整理思路和精简概念，再战一次。

当下已经有不少工具或者是软件，在努力实现从设计稿到原型稿的转换。可是尚未哪一家能够挺起胸膛说，咱们能够 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 的详情页顶部的地貌样式。你们能够去网上下载 webdeveloper 这个插件（chrome 和 firefox 都有）。选中其中的 infomation => display Topographic Information 能够查看任何一个网页的盒状结构。这个工具能帮助设计师，快速的进行布局方向上的视觉走查。

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

总结

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

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

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

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

BTW 咱们招人"偏体验前端",要求点这里。