網(wǎng)頁(yè)設(shè)計(jì)之CSS基線之道

本文譯自：CSS Baseline: The Good, The Bad And The Ugly
譯文原文：CSS基線之道
譯者：寂寞小刀
請(qǐng)尊重版權(quán)，轉(zhuǎn)載請(qǐng)注明來(lái)源，如果你有比較好的原創(chuàng)或翻譯文章，也歡迎投稿到前端觀察，多謝~~

譯者注：網(wǎng)頁(yè)設(shè)計(jì)布局中一直比較流行網(wǎng)格對(duì)齊，但只是針對(duì)水平的對(duì)齊，很少或者沒(méi)有涉及垂直對(duì)齊，這篇文章很詳細(xì)的講解了垂直網(wǎng)格，乃至基線對(duì)其的相關(guān)，而css3中的多列布局的也使其顯得更為重要，因此還是很有必要去了解學(xué)習(xí)，至少也是一種思路。

——————————譯文——————————-

這或許是因?yàn)槿鄙倩€網(wǎng)格的理解和欣賞，更或者是因?yàn)榛€網(wǎng)格是出了名的難以實(shí)現(xiàn)， 迄今為止還沒(méi)有人拿著藍(lán)圖讓它成功實(shí)現(xiàn)。 有些人甚至認(rèn)為基線在網(wǎng)絡(luò)上是多余的，基線作為一種排版術(shù)語(yǔ)和網(wǎng)絡(luò)上的行為，在網(wǎng)絡(luò)上遵循的規(guī)則有別于用于印刷的，line-height和真正的行距之間令人沮喪的差異就是最明顯的例子。 目前，無(wú)論怎樣，讓我們先假設(shè)基線至少在某種程度上對(duì)于來(lái)說(shuō)網(wǎng)頁(yè)設(shè)計(jì)師是一種有用的工具。但是它到底是什么樣的一種工具，在我們手上有什么可以自由使用的工具來(lái)實(shí)現(xiàn)它，并且最重要的是，這到底值不值得。

垂直網(wǎng)格和模式識(shí)別

在數(shù)學(xué)計(jì)算和為實(shí)現(xiàn)基線對(duì)齊而進(jìn)行將在的輕移之前，不妨來(lái)了解其根本的本質(zhì)：垂直網(wǎng)格。在了解為什么的同時(shí)，也就有了很好的準(zhǔn)備和更大的動(dòng)力來(lái)著手解決怎樣去實(shí)現(xiàn)基線對(duì)齊，這個(gè)有時(shí)讓人沉悶而又著迷的問(wèn)題。 垂直網(wǎng)格，可以簡(jiǎn)單的理解為涉及到結(jié)構(gòu)高度和垂直排列元素之間的間距，或許更為普遍點(diǎn)來(lái)說(shuō)是內(nèi)邊距（padding），外邊距（margin）和行高（line-height）。正如水平網(wǎng)格通過(guò)一個(gè)預(yù)設(shè)的單元尺寸約束布局而達(dá)到整齊和諧的效果一樣，垂直網(wǎng)格也在用戶下滾的時(shí)候通過(guò)一致的，可預(yù)測(cè)的措施提供固定結(jié)構(gòu)的內(nèi)容。

網(wǎng)格不僅在水平方向有用，在垂直方向同樣有用

為什么垂直網(wǎng)格重要？是因?yàn)?strong>垂直網(wǎng)格與我們大腦如何工作相關(guān)，也與我們?nèi)绾瓮ㄟ^(guò)模式識(shí)別來(lái)解析周圍世界相關(guān)。即使不再深入這個(gè)話題（其他比我聰明的人更適合這個(gè)任務(wù)），也可以說(shuō)模式識(shí)別容許人類大腦在模式庫(kù)中儲(chǔ)存相似或者相同的印象（譬如基本的形狀和顏色），并在遇到新的刺激的情況下通過(guò)模式庫(kù)檢索來(lái)快速分析。這也是為什么我們的閱讀的時(shí)候不去注意當(dāng)個(gè)獨(dú)立的字母，反而在一瞬間即可認(rèn)出整個(gè)單詞（從我們大腦記憶當(dāng)中拿出以前相同模式的實(shí)例），這同樣也是為什么我們能夠很快認(rèn)出當(dāng)個(gè)的字母（”A”  ”B” “C” …），即使字體、尺寸和顏色發(fā)生變化——其基本的形狀已經(jīng)存儲(chǔ)在我們大腦的模式庫(kù)。 一旦任何類型的刺激都不能匹配到你之前存儲(chǔ)的模式，這就會(huì)促使大腦在新的記憶中存入新的模式，這反過(guò)來(lái)需要更多的腦力消耗——而這就是結(jié)構(gòu)和網(wǎng)格（無(wú)論是水平還是垂直）設(shè)計(jì)的重要之處，接下來(lái)，想象一個(gè)有一致段落間距為X的簡(jiǎn)單布局。在第一處分析過(guò)之后，作為同樣的模式，你的大腦會(huì)立即認(rèn)出其他所有的相同段落。但如果相反，同樣的布局中元素之間有著不同的間距，讀者的大腦要分析所有獨(dú)立的元素才能理解他們的意思。用另一句話來(lái)說(shuō)：大腦需要分析的形狀越多，它所需時(shí)間便越長(zhǎng)。

不規(guī)則的左邊比右邊需要更多的腦力消耗

任何不規(guī)則的形狀都會(huì)打斷先流水般涌出的模式識(shí)別（因此會(huì)浪費(fèi)一部分本應(yīng)該用于欣賞優(yōu)秀內(nèi)容的腦力活動(dòng)），而一種規(guī)則的，一致的并且可以預(yù)期的結(jié)構(gòu)將會(huì)使你的設(shè)計(jì)更易讀也能理解認(rèn)知你的設(shè)計(jì)。建立一種固定的基線網(wǎng)格便是實(shí)現(xiàn)它的一種很好的方法。

此外，通過(guò)基本一個(gè)每個(gè)垂直（和水平）間距都一致，每一個(gè)元素有著預(yù)設(shè)單元尺寸的系統(tǒng)不僅消除了上述隨意的不統(tǒng)一性，也使得設(shè)計(jì)師的工作更加容易，設(shè)計(jì)師只需在總框架總決定基本的結(jié)構(gòu)。建立一個(gè)標(biāo)準(zhǔn)，比如，頭部下面總有兩個(gè)基線的白色間距，每個(gè)盒子都有三個(gè)基線空間的內(nèi)邊距，在我們的布局中增加邏輯，這不僅易于設(shè)計(jì)，易于實(shí)現(xiàn)，更重要的是易于理解。

現(xiàn)在，如果垂直網(wǎng)格還像一個(gè)抽象概念，基線的另一個(gè)優(yōu)點(diǎn)——多列水平對(duì)齊——就顯得更容易理解。這在印刷設(shè)計(jì)中更加常見(jiàn)，特別是雜志和報(bào)紙，經(jīng)常使用多列布局，相鄰段落（或者頭部）若基線對(duì)齊的很好會(huì)令閱讀沉浸而歡快，一旦對(duì)齊的不好或者根本沒(méi)有對(duì)齊閱讀便被煩人的打斷。這種來(lái)源于基線對(duì)齊的安靜的排版展現(xiàn)了一種視覺(jué)自信，一個(gè)看不見(jiàn)支架支撐著頁(yè)內(nèi)所有的元素，讓讀者潛意識(shí)的安心下來(lái)。一本左手頁(yè)每一行都對(duì)齊相對(duì)右手頁(yè)的書(shū)讓人很容易感覺(jué)到信任，而相反若是根本對(duì)齊的書(shū)籍，這種信任則相對(duì)少的多。

多列水平對(duì)齊

line-height的問(wèn)題

傳統(tǒng)意義上，基線是指大部分字母所“坐落”其上的一條看不見(jiàn)的線，每條基線之間形成基本的基線網(wǎng)格，正如之前所討論的，基線不但形成垂直網(wǎng)格，而且會(huì)使相鄰列之間水平對(duì)齊。一旦定義好了基線網(wǎng)格，接下來(lái)要做的便是強(qiáng)制所有的元素對(duì)齊，以此來(lái)使得成行的文本，邊框，圖片或者盒子元素總是匹配對(duì)齊到相同的垂直結(jié)構(gòu)。

問(wèn)題是，像在InDesign中能夠讓你點(diǎn)擊按鈕（準(zhǔn)確的開(kāi)啟和關(guān)閉網(wǎng)格）便能輕松調(diào)整形狀來(lái)對(duì)齊網(wǎng)格的工具，對(duì)應(yīng)到css中只能通過(guò)控制調(diào)整行高（line-height），內(nèi)邊距（padding），外邊距（margin），大?。╯ize）——其中任何的變動(dòng)都可能會(huì)引起元素總高度的變化。

傳統(tǒng)的基線是大部分字母所“坐落”其上線，并且基線之間的高度便是元素的總高度。

更糟糕的是，css中的line-height屬性并沒(méi)有嚴(yán)格意義上基線的概念，并且每個(gè)成行的文本都大致處于元素總高度的中間。這就意味著基于不同樣式和字體的文本精確對(duì)齊（基線對(duì)齊）需要進(jìn)一步手動(dòng)，費(fèi)時(shí)的調(diào)整和像素級(jí)的輕移。

因此，我們?nèi)绾沃珠_(kāi)始實(shí)施css的基線？因?yàn)槿鄙僭幕€語(yǔ)法，快速到位或者瀏覽器功能性的強(qiáng)迫垂直對(duì)齊，我們留給以后的實(shí)驗(yàn)。我們先開(kāi)始最基本的css方法。

好的方法：基本的css基線

迄今為止，尚無(wú)形成統(tǒng)一的正確的方法來(lái)實(shí)現(xiàn)css基線，有的人只要使行高和間距遵循一套規(guī)范便已滿足，其他人則更為制作和細(xì)致——無(wú)論怎樣——只有每個(gè)成行的文本都漂亮的“坐落”在基線上，圖片，邊框，盒子和其他元素都完美的對(duì)齊相同的網(wǎng)格才能滿足。對(duì)所有人來(lái)說(shuō)的好消息是：基本的css基線真的一點(diǎn)都不難。通過(guò)一些預(yù)先的設(shè)計(jì)決策（和堅(jiān)持），它們只需要一點(diǎn)點(diǎn)的基礎(chǔ)數(shù)學(xué)。

定義你的基線，最好是從你所使用的最小文本開(kāi)始，大多數(shù)是你的body文本，基于此再往上計(jì)算。在我下面的例子中，我使用14px的font-size配以22px的line-height，也就是22px是我的基線之間的高度。這樣定義的結(jié)果是所有的line-height和所有元素的總高（包括邊框、內(nèi)邊距和外邊距）必須是22px的倍數(shù)，如下：

					1
2
3
4
5
6
7
8
9
10

					h1{
	font-size: 40px;
	line-height: 44px;
	margin-bottom: 22px;
}
p {
	font-size: 14px;
	line-height: 22px;
	margin-bottom: 22px;
}

現(xiàn)在定義的line-height和font-size并不是最優(yōu)的，因此為了可伸縮性，將其轉(zhuǎn)換為em。如此一來(lái)，會(huì)使得代碼有點(diǎn)難以閱讀，但是所用的數(shù)學(xué)相當(dāng)?shù)暮?jiǎn)單——只需要記住在更改font-size的使用重新計(jì)算line-height。

					1
2
3
4
5
6
7
8
9
10

					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;
}

注意，在通篇我都會(huì)以px為單位提及font-size和line-height，這樣能更加清楚的表明其“物理”大小和所給例子中的比例。然而，所有的代碼，我們都會(huì)轉(zhuǎn)換成em。
利用可見(jiàn)的網(wǎng)格（很多人使用png或者gif的背景圖，其他人使用諸如Baseliner的工具），我們可以檢測(cè)所有樣式的對(duì)齊。在此我們發(fā)現(xiàn)成行的文本并沒(méi)有“坐落”在基線上，相反漂浮在基線之間。在此階段這并沒(méi)什么要當(dāng)心的——我們可以簡(jiǎn)單的便宜我們的背景圖片，或者在body上放增加內(nèi)邊距（padding）來(lái)修復(fù)。

一個(gè)可視的網(wǎng)格將對(duì)設(shè)計(jì)過(guò)程很有幫助

到目前為止一切順利，但我們的代碼仍然相當(dāng)?shù)幕A(chǔ)。但我們包含更多的屬性——比如上邊框——給所有的元素，將會(huì)發(fā)生什么？自然地，屬性值需要調(diào)整，使之合并邊框高度之后的總高度仍然是基線之間高度的倍數(shù)。

					1
2
3
4
5

					h1{
    border-top: 3px;
    padding-top: 22px;
    margin-bottom: 19px; /* 22px-3px */
}

注意，怎樣使得3px的border-top和19px的margin-bottom之和等于基線之間高度22px

使用SASS或者REM

盡管這的確不是什么高科技，但在復(fù)雜的網(wǎng)站中，特別是使用相對(duì)單位的時(shí)候上述的數(shù)字相加將會(huì)是個(gè)不小的挑戰(zhàn)。如果你愿意犧牲em的可伸縮性，堅(jiān)持使用px為單位，像SASS之類的預(yù)編譯語(yǔ)言可以解決一部分麻煩。使用SASS我們可以將基線之間高度定義為一個(gè)變量（在我的事例中為$baseline），并使用一次方程去定義它的倍數(shù)。以此來(lái)使得整個(gè)過(guò)程變得非常簡(jiǎn)單，也使得css更容易閱讀。在一般的過(guò)程中若你想重新dinginess你的基線之間高度，你只需改動(dòng)一個(gè)地方。盡管下面我的示例中使用Sass，當(dāng)使用rems也是一樣的道理——只在一處定義你的基線間高度，然后再整個(gè)代碼中生效。

					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

					$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;
}

在圖片和復(fù)雜的布局上使用JavaScript

在簡(jiǎn)單的文字排版布局上使用基線網(wǎng)格要相對(duì)簡(jiǎn)單點(diǎn)，但我們必須保證其他的元素相圖片也要對(duì)齊網(wǎng)格。對(duì)于容器，按鈕，和網(wǎng)頁(yè)分界線來(lái)說(shuō)，通過(guò)css讓任何的單元都是基線間高度的倍數(shù)，這是一個(gè)很重要的約定。但從另一個(gè)方面來(lái)說(shuō)，圖片很少遵守這一約定，其一般為一系列任意的高度，因此在這樣的例子中，少量的JavaScript便可以幫我們的大忙。我不會(huì)在此深究，但是jQuery的插件Baseline.js和Matthew Wilcox關(guān)于垂直網(wǎng)格的文章倒是值得一看。如果你正在進(jìn)行一個(gè)復(fù)雜的布局，無(wú)妨看看FtColumnflow——一段“修復(fù)css多列布局缺陷”的代碼，它廣泛使用在音樂(lè)《金融時(shí)報(bào)》的web app上，并且如果你想找一個(gè)更為健壯的方案，它或許更加合適。

上述基礎(chǔ)的方案。通過(guò)保證我們的行高，內(nèi)邊距，外邊距，高度——任何的屬性——相加和總是等于基線間高度的倍數(shù)，就可以保證我們整個(gè)垂直網(wǎng)格不受影響，這很簡(jiǎn)單，對(duì)吧？

當(dāng)然，如果接下來(lái)不繼續(xù)深入，你也不會(huì)看這篇文章了。

很爛的方案：任意可變式

壞消息是，大多數(shù)的設(shè)計(jì)師在受限的條件下工作，有時(shí)一個(gè)22px的基線間的高度對(duì)他們來(lái)說(shuō)更像是一個(gè)令人煩惱的阻礙，而不是有用的約束。例如，遵循黃分割的規(guī)則，一個(gè)16px的段落主體部分可以推導(dǎo)出26px的段頭（盡管下部段落主題可能適用高于20px的任何值，這取決于字體）。保持我們的基線間高度為22px，你或許會(huì)發(fā)現(xiàn)一個(gè)簡(jiǎn)單的22px的基線間高度的行距太窄了以至于不能舒適的閱讀，然而一個(gè)雙倍的基線間高度又顯得太寬了，只有在h2呈兩行顯示的情況下才會(huì)有這樣的爭(zhēng)論，當(dāng)然理論上可以假設(shè)列的寬度足夠的長(zhǎng)，這樣折行就永遠(yuǎn)都不會(huì)發(fā)生，嗯哼，這只是理論上。

h2要么小的尷尬要么行高太大

如果在此有一種快速到位的方法，就不會(huì)發(fā)生上述的問(wèn)題，就像我們可以簡(jiǎn)單的將h2不應(yīng)用基線網(wǎng)格，看看緊隨它的短多是不會(huì)魔術(shù)般的落到正確的位置。遺憾的，并不存在這樣可行的魔法，我們只能實(shí)事求是的去思考找出一種解決方案。

在文章的開(kāi)始我曾推薦從你有著最小文本的line-height開(kāi)始定義你的基線間的高度，就像body的文本。正如我們所看到的，一個(gè)固定的，22px（或者你body line-height的任意值）的最小單元會(huì)使得固定字體的line-height值變得很不合適。但如果讓我們的原始的基線間高度減半會(huì)怎樣？技術(shù)上來(lái)講我們的body的文本就會(huì)有兩個(gè)基線間高度的line-height，但這只是紙上談兵。在大多數(shù)的示例中，這樣帶來(lái)的可變性和排版自由的結(jié)果是值得的，我們使用黃金分割的比例來(lái)快速的定義一些h元素的大?。ㄋ纳嵛迦耄３謊m值整潔），我們可以很容易的看到每次值得增加都會(huì)有一個(gè)合適的line-height值，例如：16px/22px ，28px/33px，40px/44px等。

					1
2
3
4
5
6
7
8
9
10

					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;
}

h1, h2, 和 p都對(duì)齊了基線網(wǎng)格

丑陋的方案：偏移的方式

在我繼續(xù)之前，我必須承認(rèn)的是，下述的內(nèi)容完全是實(shí)驗(yàn)性的甚至你們其中一部分人甚至?xí)J(rèn)為它實(shí)踐起來(lái)也很糟糕。但如果你準(zhǔn)備繼續(xù)遷就我，即使它變得丑陋也繼續(xù)閱讀。好吧，我說(shuō)的丑陋是源于“代碼整潔”的觀點(diǎn)?；蛟S從設(shè)計(jì)的角度來(lái)說(shuō)，它可能確實(shí)很漂亮。

基于上述的基本的方案和帶一點(diǎn)實(shí)用性（可選）的隨意可變得方案，現(xiàn)在我們有知識(shí)和工具去改善大多數(shù)布局的基線網(wǎng)格，但是對(duì)于真正基線卻沒(méi)有實(shí)現(xiàn)。正如前面所提到的，css中l(wèi)ine-height計(jì)算的方式意味著字符大約處于行距的垂直中點(diǎn)，而不是字符的下邊緊挨著基線（先InDesign和Quark）。許多人理所應(yīng)當(dāng)?shù)恼J(rèn)為這就這是應(yīng)該的。這就是css中iine-height工作的方式，我們沒(méi)法改變。沒(méi)錯(cuò)，但是我們的眼睛并不知道css的概念。我們的眼睛并不習(xí)慣去按照x軸中心去掃描成行的文字——它們習(xí)慣于跟隨字符的地步，基線來(lái)閱讀，并且當(dāng)相鄰行錯(cuò)位的時(shí)候可讀性就會(huì)變差。

來(lái)看一下下面的額例子：

					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

					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;
}

在相鄰兩列的情況且，盡管基線已經(jīng)正確的貫穿介紹段落，但介紹段落的字母的底部（下圖紅線）并沒(méi)有對(duì)齊和主段落對(duì)其，這正是因?yàn)樽煮w計(jì)算之后的line-height所導(dǎo)致。

css中l(wèi)ine-height倒是夸列并沒(méi)有對(duì)其

現(xiàn)在到了它變丑陋的地方。為了能夠在所有列中的成行文本都對(duì)齊（當(dāng)然是最重要的一點(diǎn)是從基線網(wǎng)格開(kāi)始），我們必須手動(dòng)偏移樣式。一個(gè)簡(jiǎn)單的方法是增加padding-top的值直到字符緊挨到基線，并且相應(yīng)調(diào)整margin-bottom來(lái)彌補(bǔ)增加的值。

					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

					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;
}

混亂？也許是的。確實(shí)乏味。但同時(shí)也沒(méi)有什么能像施了魔法般的讓基線完美的對(duì)齊復(fù)雜布局一樣令人欣喜而愉悅了。

所有的元素多列對(duì)齊。

噓。如果你仍然還在閱讀，或許你要么是受虐狂，要么是對(duì)細(xì)節(jié)有著病態(tài)的迷戀，而對(duì)于后者，恭喜你，毫無(wú)疑問(wèn)你的基線就像外墻的磚一樣牢固。

這值得嗎？

下面是我們所有的?；A(chǔ)css的基線，相當(dāng)?shù)暮?jiǎn)單，只需要不多的數(shù)學(xué)和組織即可改進(jìn)你的布局。而在天平的另一端，我們可以手動(dòng)的調(diào)整padding和margin值來(lái)模擬像打印設(shè)計(jì)中精確的基線，這種概念無(wú)疑會(huì)讓純css主義者面帶愁容。更實(shí)在的問(wèn)題當(dāng)然是，手動(dòng)的偏移樣式對(duì)視覺(jué)效果帶來(lái)好處是否值得。在某種情況下，比如設(shè)計(jì)驅(qū)動(dòng)的項(xiàng)目和微型站點(diǎn)中，這確實(shí)值得。

其他情況，大部分的情況是，對(duì)于更為復(fù)雜的站點(diǎn)（你的項(xiàng)目經(jīng)理會(huì)絞盡腦汁想知道你為什么需要花那么長(zhǎng)的時(shí)間來(lái)構(gòu)建初始模版）或者由數(shù)個(gè)開(kāi)發(fā)者維持同樣的代碼的協(xié)作性項(xiàng)目，這樣確實(shí)不值得。我們需要面對(duì)的是——我們所談?wù)摰脑谀承O端的例子中不僅會(huì)增加體力勞動(dòng)，而且會(huì)讓代碼變得更為負(fù)責(zé)和難以維護(hù)。在一個(gè)足夠的大的項(xiàng)目中甚至?xí)绊懩阏军c(diǎn)的加載時(shí)間。

但是想想看，僅僅是幾年前，從行業(yè)領(lǐng)袖到黑客很少有人提倡并不討巧的“sliding doors”技術(shù)，但現(xiàn)在css3已經(jīng)讓它變得司空見(jiàn)慣。使用兩個(gè)div而不是一個(gè)來(lái)實(shí)現(xiàn)圓角這是否值得？很顯然，對(duì)一些人來(lái)說(shuō)是值得的——但其他人認(rèn)為就是浪費(fèi)時(shí)間，導(dǎo)致了實(shí)施的困難和語(yǔ)義上有缺陷的代碼。但是關(guān)鍵的一點(diǎn)是：如果沒(méi)有人嘗試如此勞力和代碼密集的技術(shù)，我們可能不會(huì)有成熟語(yǔ)法的技術(shù)時(shí)代了。

實(shí)驗(yàn)性的，糟糕的體驗(yàn)，hacks，丑陋的代碼——無(wú)論我們?cè)鯓臃Q呼它——它已經(jīng)推出了，并且將會(huì)繼續(xù)推出，我們的語(yǔ)法會(huì)改善，我們將使用新的工具來(lái)創(chuàng)建和發(fā)布下一代的在線內(nèi)容。為了回應(yīng)Mark Boulton的“若css能夠無(wú)痛的創(chuàng)建基線網(wǎng)格這將會(huì)有多酷”無(wú)論你的執(zhí)念有多強(qiáng)——無(wú)論你的字符是緊挨著基線或者懸浮在基線之間——垂直網(wǎng)格都會(huì)是一個(gè)重要的思路，使用任意本文所列的方法都會(huì)給你一個(gè)滿意的基線網(wǎng)格。

當(dāng)然，會(huì)有一些例子比較難以實(shí)施網(wǎng)格的約束，像一些元素如，題注，導(dǎo)航或者列表項(xiàng)目好像不能正確的對(duì)齊到預(yù)先定義的結(jié)構(gòu)中。在這些例子中，需要注意的是一些妥協(xié)并不是世界末日。一些設(shè)計(jì)時(shí)，像杰出的設(shè)計(jì)時(shí)Khoi Vinh，認(rèn)為基線在你內(nèi)容主體的上下文才最為重要，一些次要的元素可以在不破壞布局的情況下不遵守基線對(duì)齊。

希望能夠理解的是在此并沒(méi)有正確或者錯(cuò)誤的實(shí)現(xiàn)基線的方法，這也會(huì)激勵(lì)你在將來(lái)能夠后在你的項(xiàng)目中嘗試，在此我也鼓勵(lì)任何一個(gè)喜歡排版的人貢獻(xiàn)這個(gè)正在進(jìn)行的項(xiàng)目，能在未來(lái)的的網(wǎng)頁(yè)設(shè)計(jì)中讓垂直網(wǎng)格和水平網(wǎng)格同等重要。

好運(yùn)！

資源

• Ordering disorder, Khoi Vinh
• Setting Type on the Web to a Baseline Grid, Wilson Miner
• The relevance of the baseline grid, Elliot Jay Stocks
• Baseline Formework
• Technical Web Typography: Guidelines and Techniques, Harry Roberts
• More Perfect Typography, Tim Brown