css行高line-height的一些深入理解及應用

by zhangxinxu from http://www.
本文地址：http://www./wordpress/?p=384

一、前言

前兩天在騰訊ISD團隊博客上看到一篇翻譯的文章“深入理解css 行高”，是個不錯的文章，學到了不少東西，建議您看看。

這里，我也要講講我對line-height的一些理解，所講解的東西絕大多數(shù)與上面提到的“深入理解css 行高”是不重復的，可以說是補充或是另外一個角度的思考。另外，將結(jié)合實際，展示line-height的一些特性和一些常見應用，幫助您對css行高line-height的理解。所講述的并不一定都是正確的，歡迎指正歡迎交流。

二、一些字面意思
“行高”顧名思意指一行文字的高度。具體來說是指兩行文字間基線之間的距離?；€實在英文字母中用到的一個概念，我們剛學英語的時使用的那個英語本子每行有四條線，其中底部第二條線就是基線，是a,c,z,x等字母的底邊線。下圖的紅色線即為基線。

vertical-align中有top,middle,baseline,bottom與之是由關聯(lián)的，但具體細節(jié)如何，瀏覽器差異怎樣，我還不是很清楚。

但是由于中文跟英文長得不一樣，所以基線的說法就像老太太穿線——對不上眼。您理解為底線之差也不為不可。只是定義一回事，表現(xiàn)則另一回事。

三、line-height與line boxes高度
css中起高度作用的應該就是height以及l(fā)ine-height了吧！如果一個標簽沒有定義height屬性(包括百分比高度)，那么其最終表現(xiàn)的高度一定是由line-height起作用，即使是IE6下11像素左右默認高度bug也是如此。待我慢慢敘來。

先說一個大家都熟知的現(xiàn)象，有一個空的div，<div></div>，如果沒有設置至少大于1像素高度height值時，該div的高度就是個0。如果該div里面打入了一個空格或是文字，則此div就會有一個高度。那么您思考過沒有，為什么div里面有文字后就會有高度呢？

這是個看上去很簡單的問題，是理解line-height非常重要的一個問題?？赡苡腥藭J為是：文字撐開的！文字占據(jù)空間，自然將div撐開。 我一開始也是這樣理解的，但是事實上，深入理解inline模型后，我發(fā)現(xiàn)，根本不是文字撐開了div的高度，而是line-height！要證明很簡單 (如下測試代碼)：

css代碼：
.test1{font-size:20px; line-height:0; border:1px solid #cccccc; background:#eeeeee;}
.test2{font-size:0; line-height:20px; border:1px solid #cccccc; background:#eeeeee;}


html代碼：
<div class="test1">測試</div>
<div class="test2">測試</div>

結(jié)果如下圖(windows IE6瀏覽器下)：

結(jié)果是如此的顯而易見，test1 div有文字大小，但行高為0，結(jié)果div的高度就是個0；test2 div文字大小為0，但是有行高，為20像素，結(jié)果div高度就是20像素。這就說明撐開div高度的是line-height不是文字內(nèi)容。

到底這個line-height行高怎么就產(chǎn)生了高度呢？在inline box模型中，有個line boxes，這玩意是看不見的，這個玩意的工作就是包裹每行文字。一行文字一個line boxes。例如“艾佛森退役”這5個字，如果它們在一行顯示，你艾佛森再牛逼，對不起，只有一個line boxes罩著你；但“春哥純爺們”這5個字，要是豎著寫，一行一個，那真是夠爺們，一個字罩著一個line boxes，于是總計五個line boxes。line boxes什么特性也沒有，就高度。所以一個沒有設置height屬性的div的高度就是由一個一個line boxes的高度堆積而成的。

其實line boxes不是直接的生產(chǎn)者，屬于中層干部，真正的活兒都是它的手下 – inline boxes干的，這些手下就是文字啦，圖片啊，span之類的inline屬性的標簽啦。line boxes只是個考察匯報人員，考察它的手下誰的實際line-height值最高，誰最高，它就要誰的值，然后向上匯報，形成高度。例如，<span style="line-height:20px;">取手下line-height<span style="line-height:40px;">最高</span>的值</span>。則line boxes的高度就是40像素了。

四、行高的垂直居中性
行高還有一個特性，叫做垂直居中性。line-height的最終表現(xiàn)是通過line boxes實現(xiàn)的，而無論line boxes所占據(jù)的高度是多少（無論比文字大還是比文字?。湔紦?jù)的空間都是與文字內(nèi)容公用水平中垂線的。還拿上面這張圖來說吧。

看test1的結(jié)果，此時line boxes的高度為0，但是它是以文字的水平中垂線對稱分布的。這一重要的特性可以用來實現(xiàn)文字或圖片的垂直居中對齊。

五、在單行或多行或圖片垂直居中實現(xiàn)上的應用

您可以狠狠地點擊這里：行高實現(xiàn)單行和多行文字垂直居中demo

1、單行文字的垂直居中對齊
網(wǎng)上都是這么說的，把line-height值設置為height一樣大小的值可以實現(xiàn)單行文字的垂直居中。這句話確實是正確的，但其實也是有問題的。問 題在于height，看我的表述：“把line-height設置為您需要的box的大小可以實現(xiàn)單行文字的垂直居中”，差別在于我把height去掉 了，這個height是多余的，您不信您可以自己試試。

2、多行文字的垂直居中
要實現(xiàn)高度不固定的文字垂直居中使用padding就好了。對于高度固定的div，里面文字單行或多行顯示，字體大小有大有小的情況怎么辦呢？方法之一就是借助于line-height。

下圖為demo頁面的截圖批注圖：

正如上面所說，line boxes的高度取決于它的下屬職員的最高高度。而這個高度由一個不占據(jù)任何空間的空格完成，方法即使設置font-size為0，line- height為所需要的高度。同時，我們?yōu)榱朔指鬺ine boxes，同時要保持在一行上，需要設置display屬性為inline-block。如下代碼，有別于demo：

css代碼：

.mulit_line{line-height:150px; border:1px dashed #cccccc; padding-left:5px; font-size:0;}
.mulit_line span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;}
.mulit_line i{width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle;}

感謝小西的提醒，下為修復IE8問題后的代碼：

.mulit_line{line-height:150px; border:1px dashed #cccccc; padding-left:5px;}
.mulit_line span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;}
.mulit_line i{width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle; font-size:0;}

html代碼：

<p class="mulit_line">
    <span style="font-size:12px;">這里是高度為150像素的標簽內(nèi)的多行文字，文字大小為12像素。<br />這里是第二行，用來測試多行的顯示效果。</span><i> </i>
</p>

效果如上批注圖。已通過IE8以外的主流瀏覽器的兼容性檢測。以前曾見過說IE8的line-height有些問題，如果誰發(fā)現(xiàn)IE8下有問題，歡迎指出，不甚感謝。

3、圖片的垂直居中
您可以狠狠地單擊這里：行高使圖片垂直居中顯示demo
此方法在“大小不固定的圖片、多行文字的水平垂直居中”一文中的最后補充內(nèi)容里已經(jīng)詳細講解了。這里不多說了。

//zxx:之前未能在IE8下測試，現(xiàn)發(fā)現(xiàn)此方法不僅在Opera下有問題，在IE8下也是表現(xiàn)欠佳。所以僅僅使用line-height的垂直居中法有待斟酌，或許要使用與上面多行文字垂直居中的同樣的方法來實現(xiàn)圖片垂直居中的效果。

六、行高在文章顯示中的應用
一般社交型的網(wǎng)站都會有發(fā)博文或?qū)懭罩镜墓δ?，其中發(fā)表后的文章顯示也是有學問的，其中之一就是line-height行高。

首先要知道行高的幾種表示方法：px/em，或normal，或百分值，或數(shù)值，或inherit繼承。

在顯示文章的box里，px的表示方法首先是要被淘汰的。因為文章里面的文字是有大有小的，使用px定值，由于繼承性，無法實現(xiàn)根據(jù)文字大小自動調(diào) 整間距，會出現(xiàn)大號文字重疊的現(xiàn)象。normal也是不行的，一般文章顯示最好是650像素的寬度，1.5倍的行距較好。一般瀏覽器的normal值在 1~1.2之間，使用normal必然文字間距過小，閱讀吃力。百分值也有繼承性，但是有個很搓的辦法可以實現(xiàn)文字間距自動適應于文字的大小，那就是使用 “*”通配符，例如：.article_box *{line-height:150%;}就不會出現(xiàn)文字重疊的情況了。網(wǎng)易博客就是使用的這個方法，下圖為證：

為什么說這個方法搓呢，使用“*”通配符大大增加了css的渲染，效率低，而且有更好的方法，就是使用數(shù)值。150%雖然和1.5在值上是一樣的，但是它 們也是有差別的，差別在于繼承性，使用百分比會計算line-height的值，然后以px像素為單位繼承下去，而1.5則是先繼承1.5這個值，遍歷到 了該標簽再計算去line-height的像素值。所以同樣的效果只需要.article_box{line-height:1.5;}就可以實現(xiàn)了。

七、使用行高代替高度避免haslayout
在某些情形下，line-height可以和height互換，因為實現(xiàn)的效果一樣。都能撐開一個高度，然而這兩個css屬性有一個較隱蔽的差異，就是使 用height會使標簽haslayout，而使用line-height則不會。以前只有IE6的時候曾流行使用height清除浮動，就是利用了IE 下height使haslayout的屬性。但有時候，haslayout并不需要，反而要避免。

讀過我前面有關自適應按鈕文章的人可能會發(fā)現(xiàn)我使用了line-height代替了height，其原因在于：IE6，IE7下，類似 inline-block屬性的元素里如果有block屬性的元素，如果該block haslayout，則該標簽會沖破外部inline-block的顯示而寬度100%顯示，從使按鈕自適應文字大小的效果失效，解決方法就是使用 line-height代替height。

上圖中第一個標簽使用height定高，結(jié)果寬度直接100%顯示；第二個標簽使用line-height定高，結(jié)果很規(guī)矩，自適應與內(nèi)部文字大小。其代碼如下：

css部分：

.out{display:inline-block; background:#a0b3d6; margin-top:20px;}
.in1{display:block; height:20px;}
.in2{display:block; line-height:20px;}

html部分：

<span class="out">
	<span class="in1">height:20px;</span>
</span>
<span class="out">
	<span class="in2">line-height:20px;</span>
</span>

八、結(jié)語
很多關于line-height的基礎的知識這里并沒有詳細講述，本文一開始提到的騰訊ISD團隊的那篇關于行高的文章是不錯的，對于了解line- height的一些特性及inline box模型很有幫助。本文更多的是講述自己對于line-height的一些理解，簡述了我使用line-height的一些經(jīng)驗。由于都是個人的些東 西，加上本身自己的資歷有限，所以可能會出現(xiàn)一些錯誤，一些遺漏之處等，還望了解。歡迎指正。要是能對您的學習有所幫助就再好不過了。

原創(chuàng)文章，轉(zhuǎn)載請注明來自張鑫旭-鑫空間-鑫生活[http://www.]
本文地址：http://www./wordpress/?p=384