转：关于垂直网格与CSS基线对其的探讨
网页设计布局中一直比较流行网格对齐，但只是针对水平的对齐，不多或者没有涉及垂直对齐，这篇文章很详细的讲解了垂直网格，乃至基线对其的相关，而css3中的多列布局的也使其显得更为重要，所以仍是颇有必要去了解学习，至少也是一种思路。 这或许是由于缺乏基线网格的理解和欣赏，更或者是由于基线网格是出了名的难以实现， 迄今为止尚未人拿着蓝图让它成功实现。 有些人甚至认为基线在网络上是多余的，基线做为一种排版术语和网络上的行为，在网络上遵循的规则有别于用于印刷的，line-height和真正的行距之间使人沮丧的差别就是最明显的例子。 目前，不管怎样，让咱们先假设基线至少在某种程度上对于来讲网页设计师是一种有用的工具。可是它究竟是什么样的一种工具，在咱们手上有什么能够自由使用的工具来实现它，而且最重要的是，这到底值不值得。css
垂直网格和模式识别在数学计算和为实现基线对齐而进行将在的轻移以前，不妨来了解其根本的本质：垂直网格。在了解为何的同时，也就有了很好的准备和更大的动力来着手解决怎样去实现基线对齐，这个有时让人沉闷而又着迷的问题。 垂直网格，能够简单的理解为涉及到结构高度和垂直排列元素之间的间距，或许更为广泛点来讲是内边距（padding），外边距（margin）和行高（line-height）。正如水平网格经过一个预设的单元尺寸约束布局而达到整齐和谐的效果同样，垂直网格也在用户下滚的时候经过一致的，可预测的措施提供固定结构的内容。html
为何垂直网格重要？是由于垂直网格与咱们大脑如何工做相关，也与咱们如何经过模式识别来解析周围世界相关。即便再也不深刻这个话题（其余比我聪明的人更适合这个任务），也能够说模式识别允许人类大脑在模式库中储存类似或者相同的印象（譬如基本的形状和颜色），并在遇到新的刺激的状况下经过模式库检索来快速分析。这也是为何咱们的阅读的时候不去注意当个独立的字母，反而在一瞬间便可认出整个单词（从咱们大脑记忆当中拿出之前相同模式的实例），这一样也是为何咱们可以很快认出当个的字母（”A” ”B” “C” …），即便字体、尺寸和颜色发生变化——其基本的形状已经存储在咱们大脑的模式库。
一旦任何类型的刺激都不能匹配到你以前存储的模式，这就会促使大脑在新的记忆中存入新的模式，这反过来须要更多的脑力消耗——而这就是结构和网格（不管是水平仍是垂直）设计的重要之处，接下来，想象一个有一致段落间距为X的简单布局。在第一处分析过以后，做为一样的模式，你的大脑会当即认出其余全部的相同段落。但若是相反，一样的布局中元素之间有着不一样的间距，读者的大脑要分析全部独立的元素才能理解他们的意思。用另外一句话来讲：大脑须要分析的形状越多，它所需时间便越长。css3
任何不规则的形状都会打断先流水般涌出的模式识别（所以会浪费一部分本应该用于欣赏优秀内容的脑力活动），而一种规则的，一致的而且能够预期的结构将会使你的设计更易读也能理解认知你的设计。创建一种固定的基线网格即是实现它的一种很好的方法。
此外，经过基本一个每一个垂直（和水平）间距都一致，每个元素有着预设单元尺寸的系统不只消除了上述随意的不统一性，也使得设计师的工做更加容易，设计师只需在总框架总决定基本的结构。创建一个标准，好比，头部下面总有两个基线的白色间距，每一个盒子都有三个基线空间的内边距，在咱们的布局中增长逻辑，这不只易于设计，易于实现，更重要的是易于理解。
如今，若是垂直网格还像一个抽象概念，基线的另外一个优势——多列水平对齐——就显得更容易理解。这在印刷设计中更加常见，特别是杂志和报纸，常用多列布局，相邻段落（或者头部）若基线对齐的很好会令阅读沉浸而欢快，一旦对齐的很差或者根本没有对齐阅读便被烦人的打断。这种来源于基线对齐的安静的排版展示了一种视觉自信，一个看不见支架支撑着页内全部的元素，让读者潜意识的安心下来。一本左手页每一行都对齐相对右手页的书让人很容易感受到信任，而相反如果根本对齐的书籍，这种信任则相对少的多。web
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。app
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 */}
注意，怎样使得3px的border-top和19px的margin-bottom之和等于基线之间高度22px
使用SASS或者REM
尽管这的确不是什么高科技，但在复杂的网站中，特别是使用相对单位的时候上述的数字相加将会是个不小的挑战。若是你愿意牺牲em的可伸缩性，坚持使用px为单位，像SASS之类的预编译语言能够解决一部分麻烦。使用SASS咱们能够将基线之间高度定义为一个变量（在个人事例中为$baseline），并使用一次方程去定义它的倍数。以此来使得整个过程变得很是简单，也使得css更容易阅读。在通常的过程当中若你想从新dinginess你的基线之间高度，你只需改动一个地方。尽管下面个人示例中使用Sass，当使用rems也是同样的道理——只在一处定义你的基线间高度，而后再整个代码中生效。布局
$baseline： 22px;
.box {
padding-top： 3px;
height： $baseline*15;
}
h1 {
font-size： 40px;
line-height： $baseline*2;
margin-bottom： $baseline;
}
p {
font-size： 16px;
line-height： $baseline;
margin-bottom： $baseline;
}
在图片和复杂的布局上使用JavaScript
在简单的文字排版布局上使用基线网格要相对简单点，但咱们必须保证其余的元素相图片也要对齐网格。对于容器，按钮，和网页分界线来讲，经过css让任何的单元都是基线间高度的倍数，这是一个很重要的约定。但从另外一个方面来讲，图片不多遵照这一约定，其通常为一系列任意的高度，所以在这样的例子中，少许的JavaScript即可以帮咱们的大忙。我不会在此深究，可是jQuery的插件Baseline.js和Matthew Wilcox关于垂直网格的文章却是值得一看。若是你正在进行一个复杂的布局，无妨看看FtColumnflow——一段“修复css多列布局缺陷”的代码，它普遍使用在音乐《金融时报》的web app上，而且若是你想找一个更为健壮的方案，它或许更加合适。
上述基础的方案。经过保证咱们的行高，内边距，外边距，高度——任何的属性——相加和老是等于基线间高度的倍数，就能够保证咱们整个垂直网格不受影响，这很简单，对吧？
固然，若是接下来不继续深刻，你也不会看这篇文章了。
很烂的方案：任意可变式
坏消息是，大多数的设计师在受限的条件下工做，有时一个22px的基线间的高度对他们来讲更像是一个使人烦恼的阻碍，而不是有用的约束。例如，遵循黄分割的规则，一个16px的段落主体部分能够推导出26px的段头（尽管下部段落主题可能适用高于20px的任何值，这取决于字体）。保持咱们的基线间高度为22px，你或许会发现一个简单的22px的基线间高度的行距太窄了以致于不能温馨的阅读，然而一个双倍的基线间高度又显得太宽了，只有在h2呈两行显示的状况下才会有这样的争论，固然理论上能够假设列的宽度足够的长，这样折行就永远都不会发生，嗯哼，这只是理论上。
若是在此有一种快速到位的方法，就不会发生上述的问题，就像咱们能够简单的将h2不该用基线网格，看看紧随它的短可能是不会魔术般的落到正确的位置。遗憾的，并不存在这样可行的魔法，咱们只能实事求是的去思考找出一种解决方案。
在文章的开始我曾推荐从你有着最小文本的line-height开始定义你的基线间的高度，就像body的文本。正如咱们所看到的，一个固定的，22px（或者你body line-height的任意值）的最小单元会使得固定字体的line-height值变得很不合适。但若是让咱们的原始的基线间高度减半会怎样？技术上来说咱们的body的文本就会有两个基线间高度的line-height，但这只是纸上谈兵。在大多数的示例中，这样带来的可变性和排版自由的结果是值得的，咱们使用黄金分割的比例来快速的定义一些h元素的大小（四舍五入，保持em值整洁），咱们能够很容易的看到每次值得增长都会有一个合适的line-height值，例如：16px/22px ，28px/33px，40px/44px等。
h1 {
font-size： 2.5em;
line-height： 1.1em;
margin-bottom： 22px;
}
h2 {
font-size： 1.625em; /* 26px/16px */ line-height： 1.2692307692307692em; /* 33px/26px */ margin-bottom： 11px;
}
丑陋的方案：偏移的方式
在我继续以前，我必须认可的是，下述的内容彻底是实验性的甚至大家其中一部分人甚至会认为它实践起来也很糟糕。但若是你准备继续迁就我，即便它变得丑陋也继续阅读。好吧，我说的丑陋是源于“代码整洁”的观点。或许从设计的角度来讲，它可能确实很漂亮。
基于上述的基本的方案和带一点实用性（可选）的随意可变得方案，如今咱们有知识和工具去改善大多数布局的基线网格，可是对于真正基线却没有实现。正如前面所提到的，css中line-height计算的方式意味着字符大约处于行距的垂直中点，而不是字符的下边紧挨着基线（先InDesign和Quark）。许多人理所应当的认为这就这是应该的。这就是css中iine-height工做的方式，咱们无法改变。没错，可是咱们的眼睛并不知道css的概念。咱们的眼睛并不习惯去按照x轴中心去扫描成行的文字——它们习惯于跟随字符的地步，基线来阅读，而且当相邻行错位的时候可读性就会变差。
来看一下下面的额例子：
h1 {
font-size： 2.5em;
line-height： 1.1em;
margin-bottom： 22px;
}
h2 {
font-size： 1.625em; /* 26px/16px */ line-height： 1.2692307692307692em; /* 33px/26px */ margin-bottom： 11px;
}
p {
font-size： 0.875em;
line-height： 1.5714285714285714em;
margin-bottom： 11px;
}
p.intro {
font-size： 1.125em; /* 18px/16px */ line-height： 1.22222222em; /* 22px/16px */ margin-bottom： 22px;
}
在相邻两列的状况且，尽管基线已经正确的贯穿介绍段落，但介绍段落的字母的底部（下图红线）并无对齐和主段落对其，这正是由于字体计算以后的line-height所致使。
如今到了它变丑陋的地方。为了可以在全部列中的成行文本都对齐（固然是最重要的一点是从基线网格开始），咱们必须手动偏移样式。一个简单的方法是增长padding-top的值直到字符紧挨到基线，而且相应调整margin-bottom来弥补增长的值。
h1 {
font-size： 2.5em;
line-height： 1.1em;
padding-top： Xpx; /* This requires trial and error， as X depends on your font and line-height */ margin-bottom： 22px-Xpx;
}
h2 {
font-size： 1.625em; /* 26px/16px */ line-height： 1.2692307692307692em; /* 33px/26px */ padding-top： Xpx;
margin-bottom： 11px-Xpx;
}
p {
font-size： 0.875em;
line-height： 1.5714285714285714em;
padding-top： Xpx;
margin-bottom： 11px-Xpx;
}
p.intro {
font-size： 1.125em; /* 18px */ line-height： 1.22222222em; /* 22px */ padding-top： Xpx;
margin-bottom： 11px-Xpx;
}
混乱？也许是的。确实乏味。但同时也没有什么能像施了魔法般的让基线完美的对齐复杂布局同样使人欣喜而愉悦了。
嘘。若是你仍然还在阅读，或许你要么是受虐狂，要么是对细节有着病态的迷恋，而对于后者，恭喜你，毫无疑问你的基线就像外墙的砖同样牢固。
这值得吗？
下面是咱们全部的。基础css的基线，至关的简单，只须要很少的数学和组织便可改进你的布局。而在天平的另外一端，咱们能够手动的调整padding和margin值来模拟像打印设计中精确的基线，这种概念无疑会让纯css主义者面带愁容。更实在的问题固然是，手动的偏移样式对视觉效果带来好处是否值得。在某种状况下，好比设计驱动的项目和微型站点中，这确实值得。
其余状况，大部分的状况是，对于更为复杂的站点（你的项目经理会绞尽脑汁想知道你为何须要花那么长的时间来构建初始模版）或者由数个开发者维持一样的代码的协做性项目，这样确实不值得。咱们须要面对的是——咱们所谈论的在某些极端的例子中不只会增长体力劳动，并且会让代码变得更为负责和难以维护。在一个足够的大的项目中甚至会影响你站点的加载时间。
可是想一想看，仅仅是几年前，从行业领袖到黑客不多有人提倡并不讨巧的“sliding doors”技术，但如今css3已经让它变得司空见惯。使用两个div而不是一个来实现圆角这是否值得？很显然，对一些人来讲是值得的——但其余人认为就是浪费时间，致使了实施的困难和语义上有缺陷的代码。可是关键的一点是：若是没有人尝试如此劳力和代码密集的技术，咱们可能不会有成熟语法的技术时代了。
实验性的，糟糕的体验，hacks，丑陋的代码——不管咱们怎样称呼它——它已经推出了，而且将会继续推出，咱们的语法会改善，咱们将使用新的工具来建立和发布下一代的在线内容。为了回应Mark Boulton的“若css可以无痛的建立基线网格这将会有多酷”不管你的执念有多强——不管你的字符是紧挨着基线或者悬浮在基线之间——垂直网格都会是一个重要的思路，使用任意本文所列的方法都会给你一个满意的基线网格。
固然，会有一些例子比较难以实施网格的约束，像一些元素如，题注，导航或者列表项目好像不能正确的对齐到预先定义的结构中。在这些例子中，须要注意的是一些妥协并非世界末日。一些设计时，像杰出的设计时Khoi Vinh，认为基线在你内容主体的上下文才最为重要，一些次要的元素能够在不破坏布局的状况下不遵照基线对齐。
但愿可以理解的是在此并无正确或者错误的实现基线的方法，这也会激励你在未来可以后在你的项目中尝试，在此我也鼓励任何一个喜欢排版的人贡献这个正在进行的项目，能在将来的的网页设计中让垂直网格和水平网格同等重要。
文章来源：伯乐在线