FE[0x03] -- 如何合理科学地设计网页元素间距

江涛学编程

发布于 2020-06-19 16:46:12

3790

发布于 2020-06-19 16:46:12

距离产生美，诚然是。陌生人之间、朋友之间、情侣之间、嫡系关系之间，合适的距离看上去会让人很舒服，同样地在网页布局中，合适的距离会让你做出来的东西看着匀称和谐一点。

什么是美？

这个话题有点哲学，我们很难去给美下定义，因为每个人对美的定义不同，得到的答案也不一样。在天朝古代历史上，有那么一段时光是以胖妞为美女的，也有那么一段时光是以瘦妞为美的，情人眼里还出西施呢。所以我们把范围收一收，就思考这样一个问题，一坨几何图形，怎么样排列组合是美的，如果你看过阅兵的话，你就会发现，排列的整齐就是美的，一个个方阵、一架架飞机、一排排迫击炮，美啊美啊真美啊。所以我们大致可以认为，排列的整齐的，有规则的，匀称的那它在视觉冲击上就会给人一种美的感受。

什么是盒模型？

这里先说下盒模型，当你打开浏览器看到的一张张网页，都可以认为是由一个个盒子组合而成的。此时，我们不难发现，如果你要搞一堆盒子，我们希望了解到的是它们之间的排列方式啊、距离之类的，以及在盒子内部的一些排列组合和距离对吧，所以引出了这个话题，盒模型。

我们可以通过box-sizing这个元素属性去设置盒模型，如果值为border-box，那么它是IE盒模型；如果为content-box的话，那么它就是W3C盒模型，默认情况下是W3C盒模型。这里笔者觉得IE盒模型更符合人的一个直观感受。

简单地说呢，在IE盒模型下，width = content(内容宽度) + (padding(内边距) + border（边框）) * 2，高度同理可得，在W3C盒模型下，width = content(内容宽度)，高度同理可得，这个是从属性width、height出发考量的；还有一种就是实际大小，在IE盒模型下，你肉眼实际能够看到的大小等于width和height的乘积；而在W3C盒模型下，你肉眼实际看到的大小是 width(height) + (padding +border) * 2的乘积, 有点绕，这里理解下，直接上图吧，地址如下：https://ataola.github.io/show/box/box-sizing.html。

怎么把一堆盒子做的匀称和谐？

从楼上盒模型的例子告诉我们，只要盒子设置的得当，其实用padding也够了，这里不是说margin不好，就是有点妖，比如上下间距合并问题。那么我们回到话题中来，怎么把一堆盒子做的匀称和谐？你就想我前面举的阅兵方阵的例子吧，上下左右均匀对齐（又名四周对齐）、或者水平方向、垂直方向、单方面（上下左右）方向、极个别极端情况就抱在一起嘛。然后，我们再给它加点修饰词，比如说巨大、通常、小、迷你、微小等等、还有就是祖孙三代的故事，就是你跟你爷爷奶奶之间隔了个你爸爸对吧，那么以你爸爸为中心，我们是不是可以奔出了parent、child对吧。那么，假设你还有个姐姐，那么你跟你姐姐之间不就是child并列关系嘛！所以我们大致可以从中抽象出一个基于padding的css，把形容词和方向加上，形如楼下。

 /* padding */
 /* range: large normal small mini micro two one */
.padding-large {
    padding: 25px;
}

.padding-large-horizontal {
    padding: 0 25px 0 25px;
}

.padding-large-vertical {
    padding: 25px 0 25px 0;
}

.padding-large-parent {
    padding: 37.5px;
}

.padding-large-horizontal-parent {
    padding: 0 37.5px 0 37.5px;
}

.padding-large-vertical-parent {
    padding: 37.5px 0 37.5px 0;
}

.padding-large-child {
    padding: 12.5px;
}

.padding-large-horizontal-child {
    padding: 0 12.5px 0 12.5px;
}

.padding-large-vertical-child {
    padding: 12.5px 0 12.5px 0;
}

.padding-large-left {
    padding-left: 25px;
}

.padding-large-right {
    padding-right: 25px;
}

.padding-large-top {
    padding-top: 25px;
}

.padding-large-bottom {
    padding-bottom: 25px;
}

.padding-large-left-parent {
    padding-left: 37.5px;
}

.padding-large-right-parent {
    padding-right: 37.5px;
}

.padding-large-top-parent {
    padding-top: 37.5px;
}

.padding-large-bottom-parent {
    padding-bottom: 37.5px;
}

.padding-large-left-child {
    padding-left: 12.5px;
}

.padding-large-right-child {
    padding-right: 12.5px;
}

.padding-large-top-child {
    padding-top: 12.5px;
}

.padding-large-bottom-child {
    padding-bottom: 12.5px;
}

具体的可以参考，我做演示项目写的一个基于padding的css文件：https://ataola.github.io/show/box/assets/taolaui/padding.css

层级化思考远近高低各不同

在我们解决了怎么把一堆盒子做的匀称和谐之后，我们就要思考这样一个问题了。就是之前我们说的距离产生美，不同的关系之间它的距离是不一样的，我们不能够一板砖地去设计对吧。要做到松弛有度，两个陌生人之间肯定距离会比老铁之间大点，和情侣比那么更大了，对吧，就是这么个思路。

我们先来看一下问题，如图所示：

从图中我们看到，这样一个问题，就是第一个zjt图文它是padding内间距和整个白框div用的是同一个padding类，而楼下的用的是比楼上的要小一点，所以设计的时候我们要考虑的下，父与子的关系，同级别的关系，你把zjt图文设计的和包裹它的div的padding一样很显然不合适嘛！

有的时候我们希望zjt图文的盒子和里面的内容间距要大于内容与内容的间距，就是内容关系比较好像情侣，你把它贴的近一点，这个时候就需要思考我们楼上的祖孙三代和姐弟关系了。举个例子，例如zjt图文包裹的框和我的内容之间是parent的距离，而内容和内容之间是child之间的距离，这样子就可以达到我们想要的内容紧凑的效果。