line-height學(xué)習(xí)與總結(jié)

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

而對(duì)于單行文本的行高：慕課網(wǎng)上張?chǎng)涡窭蠋熓沁@樣解釋的：

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

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

二，行高的作用

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

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

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

     “內(nèi)容區(qū)域”（content area），是一種圍繞文字看不見(jiàn)的盒子，大小與字體大小有關(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），每一行就是一個(gè)“行框盒子”，它其實(shí)就是包裹每行文字。一行文字一個(gè)line boxes。     

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

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

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

三．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 的值。若是有固定高度，則讓行高等于高度值，就可以實(shí)現(xiàn)單行文本垂直居中。

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

父容器高度不固定時(shí)：

 Css代碼：

Html代碼：

實(shí)現(xiàn)效果圖：

若高度固定時(shí)：

Css代碼;

Html 代碼：

 實(shí)現(xiàn)效果圖：

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

        Css代碼：

Html代碼：

代碼實(shí)現(xiàn)效果

五，總結(jié)

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