CSS基线之道：网页设计布局之垂直网格设计

网页设计布局中一直比较流行网格对齐，但只是针对水平的对齐，很少或者没有涉及垂直对齐，这篇文章很详细的讲解了垂直网格，乃至基线对其的相关，而css3中的多列布局的也使其显得更为重要，因此还是很有必要去了解学习，至少也是一种思路。

这或许是因为缺少基线网格的理解和欣赏，更或者是因为基线网格是出了名的难以实现， 迄今为止还没有人拿着蓝图让它成功实现。 有些人甚至认为基线在网络上是多余的，基线作为一种排版术语和网络上的行为，在网络上遵循的规则有别于用于印刷的，line-height和真正的行距之 间令人沮丧的差异就是最明显的例子。 目前，无论怎样，让我们先假设基线至少在某种程度上对于来说网页设计师是一种有用的工具。但是它到底是什么样的一种工具，在我们手上有什么可以自由使用的 工具来实现它，并且最重要的是，这到底值不值得。

垂直网格和模式识别在数学计算和为实现基线对齐而进行将在的轻移之前，不妨来了解其根本的本质：垂直网格。在了 解为什么的同时，也就有了很好的准备和更大的动力来着手解决怎样去实现基线对齐，这个有时让人沉闷而又着迷的问题。 垂直网格，可以简单的理解为涉及到结构高度和垂直排列元素之间的间距，或许更为普遍点来说是内边距（padding），外边距（margin）和行高 （line-height）。正如水平网格通过一个预设的单元尺寸约束布局而达到整齐和谐的效果一样，垂直网格也在用户下滚的时候通过一致的，可预测的措 施提供固定结构的内容。

网格不仅在水平方向有用，在垂直方向同样有用

为什么垂直网格重要？是因为垂直网格与我们大脑如何工作相关，也与我们如何通过模式识别来解析周围世界相关。即 使不再深入这个话题（其他比我聪明的人更适合这个任务），也可以说模式识别容许人类大脑在模式库中储存相似或者相同的印象（譬如基本的形状和颜色），并在 遇到新的刺激的情况下通过模式库检索来快速分析。这也是为什么我们的阅读的时候不去注意当个独立的字母，反而在一瞬间即可认出整个单词（从我们大脑记忆当 中拿出以前相同模式的实例），这同样也是为什么我们能够很快认出当个的字母（”A”  ”B” “C” …），即使字体、尺寸和颜色发生变化——其基本的形状已经存储在我们大脑的模式库。

一旦任何类型的刺激都不能匹配到你之前存储的模式，这就会促使大脑在新的记忆中存入新的模式，这反过来需要更多的脑力消耗——而这就是结构和网格 （无论是水平还是垂直）设计的重要之处，接下来，想象一个有一致段落间距为X的简单布局。在第一处分析过之后，作为同样的模式，你的大脑会立即认出其他所 有的相同段落。但如果相反，同样的布局中元素之间有着不同的间距，读者的大脑要分析所有独立的元素才能理解他们的意思。用另一句话来说：大脑需要分析的形 状越多，它所需时间便越长。

不规则的左边比右边需要更多的脑力消耗

任何不规则的形状都会打断先流水般涌出的模式识别（因此会浪费一部分本应该用于欣赏优秀内容的脑力活动），而一种规则的，一致的并且可以预期的结构将会使你的设计更易读也能理解认知你的设计。建立一种固定的基线网格便是实现它的一种很好的方法。

此外，通过基本一个每个垂直（和水平）间距都一致，每一个元素有着预设单元尺寸的系统不仅消除了上述随意的不统一性，也使得设计师的工作更加容易， 设计师只需在总框架总决定基本的结构。建立一个标准，比如，头部下面总有两个基线的白色间距，每个盒子都有三个基线空间的内边距，在我们的布局中增加逻 辑，这不仅易于设计，易于实现，更重要的是易于理解。

现在，如果垂直网格还像一个抽象概念，基线的另一个优点——多列水平对齐——就显得更容易理解。这在印刷设计中 更加常见，特别是杂志和报纸，经常使用多列布局，相邻段落（或者头部）若基线对齐的很好会令阅读沉浸而欢快，一旦对齐的不好或者根本没有对齐阅读便被烦人 的打断。这种来源于基线对齐的安静的排版展现了一种视觉自信，一个看不见支架支撑着页内所有的元素，让读者潜意识的安心下来。一本左手页每一行都对齐相对 右手页的书让人很容易感觉到信任，而相反若是根本对齐的书籍，这种信任则相对少的多。

多列水平对齐

line-height的问题

传统意义上，基线是指大部分字母所“坐落”其上的一条看不见的线，每条基线之间形成基本的基线网格，正如之前所讨论的，基线不但形成垂直网格，而且 会使相邻列之间水平对齐。一旦定义好了基线网格，接下来要做的便是强制所有的元素对齐，以此来使得成行的文本，边框，图片或者盒子元素总是匹配对齐到相同 的垂直结构。

问题是，像在InDesign中能够让你点击按钮（准确的开启和关闭网格）便能轻松调整形状来对齐网格的工具，对应到css中只能通过控制调整行高 （line-height），内边距（padding），外边距（margin），大小（size）——其中任何的变动都可能会引起元素总高度的变化。

传统的基线是大部分字母所“坐落”其上线，并且基线之间的高度便是元素的总高度。

更糟糕的是，css中的line-height属性并没有严格意义上基线的概念，并且每个成行的文本都大致处于元素总高度的中间。这就意味着基于不同样式和字体的文本精确对齐（基线对齐）需要进一步手动，费时的调整和像素级的轻移。

因此，我们如何着手开始实施css的基线？因为缺少原生的基线语法，快速到位或者浏览器功能性的强迫垂直对齐，我们留给以后的实验。我们先开始最基本的css方法。

好的方法：基本的css基线

迄今为止，尚无形成统一的正确的方法来实现css基线，有的人只要使行高和间距遵循一套规范便已满足，其他人则更为制作和细致——无论怎样——只有 每个成行的文本都漂亮的“坐落”在基线上，图片，边框，盒子和其他元素都完美的对齐相同的网格才能满足。对所有人来说的好消息是：基本的css基线真的一 点都不难。通过一些预先的设计决策（和坚持），它们只需要一点点的基础数学。

定义你的基线，最好是从你所使用的最小文本开始，大多数是你的body文本，基于此再往上计算。在我下面的例子中，我使用14px的font- size配以22px的line-height，也就是22px是我的基线之间的高度。这样定义的结果是所有的line-height和所有元素的总高 （包括边框、内边距和外边距）必须是22px的倍数，如下：

h1 {

font-size： 40px;

line-height： 44px;

margin-bottom： 22px;

}

p {

font-size： 14px;

line-height： 22px;

margin-bottom： 22px;

}

现在定义的line-height和font-size并不是最优的，因此为了可伸缩性，将其转换为em。如此一来，会使得代码有点难以阅读，但是所用的数学相当的简单——只需要记住在更改font-size的使用重新计算line-height。

h1 {

font-size： 2.5em; /* = 40px/16px */ line-height： 1.1em; /* = 44px/40px */ margin-bottom： 22px;

}

p {

font-size： 0.875em; /* 16px is the default em size */ line-height： 1.5714285714285714em; /* = 22px/14px */ margin-bottom： 22px;

}

注意，在通篇我都会以px为单位提及font-size和line-height，这样能更加清楚的表明其“物理”大小和所给例子中的比例。然而，所有的代码，我们都会转换成em。

利用可见的网格（很多人使用png或者gif的背景图，其他人使用诸如Baseliner的工具），我们可以检测所有样式的对齐。在此我们发现成行 的文本并没有“坐落”在基线上，相反漂浮在基线之间。在此阶段这并没什么要当心的——我们可以简单的便宜我们的背景图片，或者在body上放增加内边距 （padding）来修复。

一个可视的网格将对设计过程很有帮助

到目前为止一切顺利，但我们的代码仍然相当的基础。但我们包含更多的属性——比如上边框——给所有的元素，将会发生什么？自然地，属性值需要调整，使之合并边框高度之后的总高度仍然是基线之间高度的倍数。

h1 {

border-top： 3px;

padding-top： 22px;

margin-bottom： 19px; /* 22px-3px *