CSS 布局与“仓库管理”的关系-CSDN博客

上周写了一个文章不会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网状支架。