line-height學(xué)習(xí)與總結(jié)-創(chuàng)新互聯(lián)

一．CSS中，line-height被用來控制行與行之間垂直距離，指兩行文字基線之間的距離（baseline）,借用一張圖來說明什么是基線，以及行高的定義：下圖兩條紅線的距離，如下圖：

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供內(nèi)黃網(wǎng)站建設(shè)、內(nèi)黃做網(wǎng)站、內(nèi)黃網(wǎng)站設(shè)計、內(nèi)黃網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、內(nèi)黃企業(yè)網(wǎng)站模板建站服務(wù)，十多年內(nèi)黃做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

而對于單行文本的行高：慕課網(wǎng)上張鑫旭老師是這樣解釋的：

（1）行高由于繼承性，影響無處不在，即使是單行文本也不例外；

（2）行高是真正的幕后黑手，高度表現(xiàn)不是行高，而是由內(nèi)容區(qū)域與行間距決定，而正好，內(nèi)容區(qū)域+行間距=行高。因此，單行文本行高就是這樣定義的。

二，行高的作用

      行高決定內(nèi)聯(lián)盒子的高度。

     （1）內(nèi)容區(qū)域+行間距=行高，內(nèi)容區(qū)域高度（如藍色區(qū)域的高度），由字體及字號決定，與行高無關(guān)，行間距（藍色區(qū)域與黑色邊框的距離）=（行高-內(nèi)容區(qū)域高度）/2就是上下行間距，如圖9：

（2）line-height與行內(nèi)框盒子模型有關(guān)

     “內(nèi)容區(qū)域”（content area），是一種圍繞文字看不見的盒子，大小與字體大小有關(guān)；

     “內(nèi)聯(lián)盒子”（inline boxes），讓內(nèi)容排成一行的作用，如果有外部含inline水平的標(biāo)簽（span,a,em,strong等），則屬于“內(nèi)聯(lián)盒子”，如果只是光禿禿的文字，則屬于“匿名內(nèi)聯(lián)盒子”；

     “行框盒子”（lines boxes），每一行就是一個“行框盒子”，它其實就是包裹每行文字。一行文字一個line boxes。

  

所以一個沒有設(shè)置height屬性的div的高度就是由一個一個line boxes的高度堆積而成的。

行內(nèi)框盒子對理解line-height有什么幫助呢？

   在行內(nèi)框盒子（inline box）模型中，這個（行框盒子）line boxes，line boxes什么特性也沒有，就高度。所以一個沒有設(shè)置height屬性的div的高度就是由一個一個line boxes的高度堆積而成的。Line boxes其實是由它里面的內(nèi)聯(lián)盒子里的文字啊，圖片等等，誰最高就決定，高度值就是誰。

三．line-height的屬性值：

1.body{line-height:normal;}

2.body{line-height:inherit;}

3.body{line-height:120%;}

4. body{line-height:25px;}

5.body{line-height:1.2}

四．Line-height的應(yīng)用：

（1）單行文本垂直居中，不用設(shè)置高度，而只需設(shè)置line-height 的值。若是有固定高度，則讓行高等于高度值，就可以實現(xiàn)單行文本垂直居中。

（2）對于多行文本，沒必要使用line-height，使用padding來更方便，讓其父容器不固定高度。設(shè)置容器的padding上下為相同的固定值，容器的高度隨著內(nèi)容的增加而增加。若高度固定，用一個span標(biāo)簽將所有的文字封裝起來，設(shè)置文字display屬性（inline-block屬性）,并把line-height的高度與height的高度設(shè)置一樣，就可以完成垂直居中。實現(xiàn)代碼：

父容器高度不固定時：

 Css代碼：

Html代碼：

實現(xiàn)效果圖：

若高度固定時：

Css代碼;

Html 代碼：

 實現(xiàn)效果圖：

  （3）圖片的水平垂直居中：

        Css代碼：

    

Html代碼：

  

代碼實現(xiàn)效果

五，總結(jié)

     這是自己學(xué)習(xí)line-height的總結(jié)，以及自己在實際中長用到line-height的地方。對與這個還會繼續(xù)再學(xué)習(xí)，會繼續(xù)補充或者修改些許內(nèi)容。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享名稱：line-height學(xué)習(xí)與總結(jié)-創(chuàng)新互聯(lián)
文章起源：http://muchs.cn/article40/deooeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站收錄、營銷型網(wǎng)站建設(shè)、外貿(mào)建站、定制網(wǎng)站、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)