這篇文章主要介紹了CSS行高line-height屬性是什么，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)于2013年開始，先為札達(dá)等服務(wù)建站，札達(dá)等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為札達(dá)企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

初入前端的時(shí)候覺得CSS知道display、position、float就可以在布局上游刃有余了，隨著以后工作問題層出不窮，才逐漸了解到CSS并不是幾個(gè)style屬性那么簡單，最近看了一些關(guān)于行高的知識，就此總結(jié)一下。

所謂行高是指文本行基線間的垂直距離。要想理解這句話首先得了解幾個(gè)基本知識：

頂線、中線、基線、底線

    
        
        
    
    
        

            

                中文English
                English中文
            
        
    

從上到下四條線分別是頂線、中線、基線、底線，很像才學(xué)英語字母時(shí)的四線三格，我們知道vertical-align屬性中有top、middle、baseline、bottom，就是和這四條線相關(guān)。

尤其記得基線不是最下面的線，最下面的是底線。

行高、行距與半行距

行高是指上下文本行的基線間的垂直距離，即圖中兩條紅線間垂直距離。

行距是指一行底線到下一行頂線的垂直距離，即第一行粉線和第二行綠線間的垂直距離。

半行距是行距的一半，即區(qū)域3垂直距離/2，區(qū)域1，2，3，4的距離之和為行高，而區(qū)域1，2，4距離之和為字體size，所以半行距也可以這么算：（行高-字體size）/2

內(nèi)容區(qū)、行內(nèi)框、行框

內(nèi)容區(qū)：底線和頂線包裹的區(qū)域，即下圖深灰色背景區(qū)域。

行內(nèi)框，每個(gè)行內(nèi)元素會(huì)生成一個(gè)行內(nèi)框，行內(nèi)框是一個(gè)瀏覽器渲染模型中的一個(gè)概念，無法顯示出來，在沒有其他因素影響的時(shí)候（padding等），行內(nèi)框等于內(nèi)容區(qū)域，而設(shè)定行高時(shí)行內(nèi)框高度不變，半行距【（行高-字體size）/2】分別增加/減少到內(nèi)容區(qū)域的上下兩邊（深藍(lán)色區(qū)域）

行框（line box），行框是指本行的一個(gè)虛擬的矩形框，是瀏覽器渲染模式中的一個(gè)概念，并沒有實(shí)際顯示。行框高度等于本行內(nèi)所有元素中行內(nèi)框最大的值（以行高值最大的行內(nèi)框?yàn)榛鶞?zhǔn)，其他行內(nèi)框采用自己的對齊方式向基準(zhǔn)對齊，最終計(jì)算行框的高度），當(dāng)有多行內(nèi)容時(shí)，每行都會(huì)有自己的行框。

                中文English
                中文English
                English中文
                English中文
            

line-height

基本概念搞明白了我們就可以說說本文的主角line-height屬性了。

定義：line-height 屬性設(shè)置行間的距離（行高），不能使用負(fù)值。該屬性會(huì)影響行框的布局。在應(yīng)用到一個(gè)塊級元素時(shí)，它定義了該元素中基線之間的最小距離而不是最大距離。line-height 與 font-size 的計(jì)算值之差(行距)分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部。可以包含這些內(nèi)容的最小框就是行框。

可能的值

貌似很簡單，但感覺沒什么用出的樣子，那就讓我們看看line-height的幾個(gè)應(yīng)用

div文字垂直居中

div居中對齊一直是個(gè)難題，水平還好解決些，margin：0 auto; 可以解決現(xiàn)代瀏覽器，IE下text-align:center。但垂直居中就沒那么簡單了，默認(rèn)是這樣子的。

                This is a test.

                        This is a test.
                
            

我們可以利用line-block這樣做

                This is a test.

                        This is a test.
                
            

單行就比較簡單了，把line-height設(shè)置為box的大小可以實(shí)現(xiàn)單行文字的垂直居中

                This is a test.
            

元素對行高影響

行框高度是行內(nèi)最高的行內(nèi)框高度，通過line-height調(diào)整，內(nèi)容區(qū)行高與字體尺寸有關(guān)，padding不對行高造成影響。

                This is a test
            
            

                This is a test
            

第二個(gè)span雖然因?yàn)閜adding原因內(nèi)容區(qū)變大，當(dāng)行高并未改變

行高的繼承

行高是可繼承的，但并不是簡單的copy父元素行高，繼承的是計(jì)算得來的值。

                

                    1232

                    123
                
            

按一般理解既然line-height可以繼承，那么p元素的行高也是150%了，可是事實(shí)是這樣的

非但沒有變成150%，反而連100%都沒有，重疊了！這就是繼承計(jì)算的結(jié)果，如果父元素的line-height有單位（px、%）,那么繼承的值則是換算后的一個(gè)具體的px級別的值；上例p得到的是10px*150%=15px的行高，而P的字體大小為30px，所以發(fā)生了重疊。

而如果屬性值沒有單位，則瀏覽器會(huì)直接繼承這個(gè)“因子（數(shù)值）”，而非計(jì)算后的具體值，此時(shí)它的line-height會(huì)根據(jù)本身的font-size值重新計(jì)算得到新的line-height 值。

                

                    1232

                    123
                
            

所以在使用line-height時(shí)，除非你刻意否則盡量使用倍數(shù)設(shè)值

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享CSS行高line-height屬性是什么內(nèi)容對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來學(xué)習(xí)!