不会CSS布局多是“物理”很差

写完这篇文章，并在咱们团队里作了一个分享。你们广泛反应的问题是，抛出的概念太多有点很差理解。这边从新整理思路和精简概念，再战一次。因此请转移到修订版CSS 布局与“仓库管理”的关系

当下已经有不少工具或者是软件，在努力实现从设计稿到原型稿的转换。可是到目前我尚未看到，哪一家能够挺起胸膛说，咱们这个能够 100% 的实现这个需求。

是什么阻止了这两个视觉上几乎同样的稿子之间的转换呢？在我看来，是由于它们之间的物理逻辑不同。简单的说，要实现从设计稿到原型稿到转换，实际上是要达到突破两者之间物理次元的高度。

原型稿设计稿的区别

由于咱们都太习惯依赖本身都眼睛，致使咱们很容易只从一个角度看待问题。若是咱们换一个视角，结合咱们现实生活中的物理规律，或许能看出一些端倪。这边咱们转到两个稿子的侧面。

我把设计的过程理解为是在地板上做画的过程，元素之间只有覆盖关系。也正由于元素之间的逻辑如此简单，因此咱们能够在任意位置起笔，而不用担忧影响其它元素的位置。

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

由于是在墙上操做，很明显全部的元素都会受到地球的引力掉到地板上(固然若是下面的元素若是够大，是能够叠放的)。但是在实际的网页中，咱们习惯的是从上往下看的，那这个怎么办呢？

咱们须要一个向上的力，因而在整个房间里面放满水。此时全部元素受到浮力的影响往上浮。可是能够看到咱们的文字都飘上来了，顺序都乱了。怎么才能让这几个文字放在应该的位置呢？

很简单，咱们用盒子把这些文字都装起来。而这一切和你家的衣储很是类似。惟一的区别只是你家如今已经充满了水。

盒状模型

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

这边插入一个box-sizing的小知识点。就像你买核桃，有的店带壳的有的店不带壳同样。你不能说这其中任何一家的核桃有问题。只是他们的计算方式不同。浏览器对于宽度的理解也是同样，有的浏览器会把边框计算进去，有的浏览器则不会。那咱们要搞清楚的就是，这个浏览器是怎样的一种方式，或者你直接利用box-sizing告诉浏览器我要那种计算方式。

对于盒子内外的间隙，这边咱们能够理解为磁力。咱们全部的盒子都是金属的。有的盒子自带磁力（h1,body， p），有的盒子不带磁力（div，span）。咱们能够经过margin,和paading这两个插座给这些盒子充电，从而改变他们之间的磁力大小。

• margin 这个插座是给外皮充电的，因此力是向外的。
• padding 这个插座是给内壳充电的，因此力是向内的。

定位

按照以上逻辑咱们就是要实现上面这样的层叠效果这么办呢？

这边咱们只须要在咱们的盒子上套一个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的。

咱们能容易给盒子添加力，文字相对较难，因此咱们一般会把文字装进盒子，间接实现力的效果。

在浏览器中多放几个盒子和文字，能够看到这样的效果。 奇怪的是，在带宽度的block元素右侧多了不少空白。按照以前的逻辑来讲，咱们的下面的元素受到浮力的影响是会自动往上填充的。

这个能够理解为带有block属性的盒子之间是会有一层看不见的隔板的(相似于衣柜里面的透明玻璃板)。无论这个盒子的宽度是多少下面的东西都浮不上来。

若是咱们就是但愿下面的元素可以浮动上来呢？那么咱们能够经过float这个属性拆掉这层玻璃版。

可想而知由于咱们玻璃版拆掉了，下面的文字也会自动的浮上来。

因而咱们能够经过在文字的盒子上添加一个叫clear:both；的玻璃板，这样咱们的文字就不会浮动上去。

固然既然是添加板子，咱们能够把咱们浮动的元素也装到一个盒子里面。给这个盒子添加一个高度（height:60px），或者设置overflow属性，或者利用你们经常使用的clearfix预置css样式。也能够实现一样的效果。

固然咱们网页中除了带隔板的block元素。也有不带隔板的inline-block元素和inline元素。

以上是 Webnovel 的详情页顶部的截图。你们能够去网速下载 webdeveloper 这个插件，chrome和firefox都有。利用其中的 infomation => display Topographic Information 能够去查看任何一个网页的盒状结构。

其它布局

对于像table，flex，grid布局，你觉得他们很高级。其实它们都是带这个玩意的盒子而已。

原理是相通的，简单的说，他们是比浮动更稳定和灵活的布局方式。

总结

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

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

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

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

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