深入理解line
什么是行間距？
目前累計(jì)服務(wù)客戶上千余家，積累了豐富的產(chǎn)品開發(fā)及服務(wù)經(jīng)驗(yàn)。以網(wǎng)站設(shè)計(jì)水平和技術(shù)實(shí)力，樹立企業(yè)形象，為客戶提供成都網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)頁設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷、VI設(shè)計(jì)、網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。創(chuàng)新互聯(lián)公司始終以務(wù)實(shí)、誠信為根本，不斷創(chuàng)新和提高建站品質(zhì)，通過對(duì)領(lǐng)先技術(shù)的掌握、對(duì)創(chuàng)意設(shè)計(jì)的研究、對(duì)客戶形象的視覺傳遞、對(duì)應(yīng)用系統(tǒng)的結(jié)合，為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進(jìn)步。
古時(shí)候我們使用印刷機(jī)來出來文字。印刷出來的每個(gè)字，都位于獨(dú)立的一個(gè)塊中。
行間距，即傳說中控制兩行文字垂直距離的東東。在CSS中，line-height被用來控制行與行之間垂直距離。
不過，行間距與半行間距，還是取決于CSS中的line-height。那么，如何來使用line-height呢？
默認(rèn)狀態(tài)，瀏覽器使用1.0-1.2 line-height, 這是一個(gè)初始值。你可以定義line-height屬性來覆蓋初始值：p｛line-height:140%｝
你可以有5種方式來定義line-height。
1.line-height可以被定義為：body{line-height:normal;}
2.line-height可以被定義為：body{line-height:inherit;}
3.line-height可以使用一個(gè)百分比的值body{line-height:120%;}
4.line-height可以被定義為一個(gè)長(zhǎng)度值(px,em等) body{line-height:25px;}
5.line-height也可以被定義為純數(shù)字， body{line-height:1.2}
縮寫line-height
那5種line-height寫法，可以在font屬性中縮寫。line-height的值緊跟著font-size值使用斜杠分開，如：<font-size>/<line-height>
實(shí)例：body{font:100%/normal arial;} , body{font:100%/120% arial;} ,body{font:100%/1.2 arial;} ,body{font:100%/25px arial;}
計(jì)算line-height
有些CSS屬性是可繼承的（inherited），從層疊的元素里傳遞下來。這樣做是為了方便開發(fā)者，不再為后代元素重新設(shè)值。
對(duì)于line-height繼承有點(diǎn)復(fù)雜。
1、百分比
2，長(zhǎng)度
3，normal
4，純數(shù)字
所謂行高是指文本行基線間的垂直距離。要想理解這句話首先得了解幾個(gè)基本知識(shí)：
頂線、中線、基線、底線
從上到下四條線分別是頂線、中線、基線、底線，很像才學(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)框采用自己的對(duì)齊方式向基準(zhǔn)對(duì)齊，最終計(jì)算行框的高度），當(dāng)有多行內(nèi)容時(shí)，每行都會(huì)有自己的行框。
line-height
基本概念搞明白了我們就可以說說本文的主角line-height屬性了。
定義：line-height 屬性設(shè)置行間的距離（行高），不能使用負(fù)值。該屬性會(huì)影響行框的布局。在應(yīng)用到一個(gè)塊級(jí)元素時(shí)，它定義了該元素中基線之間的最小距離而不是最大距離。line-height 與 font-size 的計(jì)算值之差(行距)分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部。可以包含這些內(nèi)容的最小框就是行框。
div居中對(duì)齊一直是個(gè)難題，水平還好解決些，margin：0 auto; 可以解決現(xiàn)代瀏覽器，IE下text-align:center。但垂直居中就沒那么簡(jiǎn)單了，默認(rèn)是這樣子的。
<div > <span>This is a test.<br/> This is a test. </span></div>
我們可以利用line-block這樣做
<div > <span >This is a test.<br/> This is a test. </span></div>
單行就比較簡(jiǎn)單了，把line-height設(shè)置為box的大小可以實(shí)現(xiàn)單行文字的垂直居中
行高是可繼承的，但并不是簡(jiǎn)單的copy父元素行高，繼承的是計(jì)算得來的值。
<div > <p > 1232<br/> 123 </p></div>
按一般理解既然line-height可以繼承，那么p元素的行高也是150%了，可是事實(shí)是這樣的
非但沒有變成150%，反而連100%都沒有，重疊了！這就是繼承計(jì)算的結(jié)果，如果父元素的line-height有單位（px、%）,那么繼承的值則是換算后的一個(gè)具體的px級(jí)別的值（在10px后有換算到30px ，但10px*150%已經(jīng)繼承到下一個(gè)30px的值上）；上例p得到的是10px*150%=15px的行高，而P的字體大小為30px，所以發(fā)生了重疊。
而如果屬性值沒有單位，則瀏覽器會(huì)直接繼承這個(gè)“因子（數(shù)值）”，而非計(jì)算后的具體值，此時(shí)它的line-height會(huì)根據(jù)本身的font-size值重新計(jì)算得到新的line-height 值。
<div > <p > 1232<br/> 123 </p></div>
名稱欄目：深入理解line
文章出自：http://chinadenli.net/article20/gieojo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、全網(wǎng)營(yíng)銷推廣、靜態(tài)網(wǎng)站、小程序開發(fā)、App設(shè)計(jì)、標(biāo)簽優(yōu)化
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
