深入了解css的行高LineHeight屬性

1、CSS瀏覽器什么是行間距？古時候我們是用印刷機(jī)來處理文字，印出來的每個字都位于獨(dú)立的一個塊里。行間距，即傳說中控制兩行文字之間垂直距離的東東。在CSS，line-height被用來控制行與行之間的垂直距離。不過行間距與半行間距還是取決于CSS中的line-height。那么如何來使用line-height？默認(rèn)狀態(tài)，瀏覽器使用1.0-1.2 line-height .這是一個初始值。你可以定義CSS里的line-height屬性來覆蓋默認(rèn)值Css代碼pline-height:140%;p line-height:140%; 你可以用5種方式來定義line-height:1、line-heigh

2、t可以被定義為normal。Css代碼bodyline-height:normal;body line-height:normal; 2、line-height可以被定義為繼承p line-height:inherit; 3、line-height可以使用一個百分比的值p line-height:120%; 4、line-height可以被定義為一個長度值（單位px、em等）p line-height:20px; 5、line-height也可以被定義為純數(shù)字（甚至沒有單位）p line-height:1.2; 縮寫line-height那5種line-height值也可以在font屬性里縮寫

3、line-height值緊跟著font-size值，使用斜杠隔開/舉例來說.值normalbody font:100%/normal arial; helvetica, sans-serif; 值百分比body font:100%/120% arial; helvetica, sans-serif; 值長度body font:100%/20px arial; helvetica, sans-serif; 值純數(shù)字body font:100%/1.2arial; helvetica, sans-serif; 計算line-height有些CSS屬性是可繼承(inherited)(從層疊的元素里傳

4、遞下來)這樣設(shè)計是為了方便開發(fā)者于是他們不用為所有后代元素再設(shè)置一次例如：color屬性是可繼承的。如果body被定義了color，那么它會傳遞給頁面里的所有元素對于line-height繼承會有一點(diǎn)復(fù)雜為了更好的演示line-height的各種用法使用如下的HTML代碼 consect etuer adipi scing . Lorem ipsum dolor sit amet . Duis autem vel eum . 這些代碼有著如下文檔樹結(jié)構(gòu)我們同時使用如下CSS（注：文字大小使用像素是為了看起來簡單，盡管不推薦這么干?。〤ss代碼bodyfont-size:16px;line-he

5、ight:XXX;h1font-size:32px;pfont-size:16px;#footerfont-size:12px;body font-size:16px; line-height:XXX; h1 font-size:32px;p font-size:16px; #footer font-size:12px;例1：值百分比line-height被設(shè)置為百分比（120%）Css代碼bodyfont-size:16px;line-height:120%;h1font-size:32px;pfont-size:16px;#footerfont-size:12px;body font-si

6、ze:16px; line-height:120%; h1 font-size:32px;p font-size:16px;#footer font-size:12px;line-height的百分比（120%）和body的文字大?。?6px）被用來計算值（16px*120%=19.2px）這個計算出來的值會被層疊下去的元素所繼承所有繼承下來的元素會忽略本身的font-size，而使用相同的，計算出來的line-height.line-height不會隨著相關(guān)的font-size做相應(yīng)的比例縮放例2、值：長度line-height被設(shè)置成一個長度值（20px）Css代碼bodyfont-siz

7、e:16px;line-height:20px;h1font-size:32px;pfont-size:16px;#footerfont-size:12px;body font-size:16px; line-height:20px; h1 font-size:32px;p font-size:16px;#footer font-size:12px;長度值20px會被后代繼承所有繼承下來的元素會忽略本身的font-size，而使用相同的，繼承的line-heightline-height還是不會隨著相關(guān)的font-size做相應(yīng)的比例縮放例3、值：normalline-height被設(shè)置為no

8、rmal（約為1.2）Css代碼bodyfont-size:16px;line-height:normal;h1font-size:32px;pfont-size:16px;#footerfont-size:12px;body font-size:16px; line-height:normal; h1 font-size:32px;p font-size:16px;#footer font-size:12px;在本例中使用繼承的計算出來的值還不如用值normal，瀏覽器在解釋normal的時候會有細(xì)微差別?，F(xiàn)在所有繼承下來的元素不會忽略本身的font-size，而使用基于font-size算

9、出來的line-height現(xiàn)在，line-height會隨著相關(guān)的font-size做相應(yīng)的比例放縮但是，如果你既想要normal的靈活，又想要設(shè)置一個自定義的值這時候就得指望值：純數(shù)字例4、值：純數(shù)字line-height被設(shè)置為值：純數(shù)字（1.5）Css代碼bodyfont-size:16px;line-height:1.5;h1font-size:32px;pfont-size:16px;#footerfont-size:12px;body font-size:16px; line-height:1.5; h1 font-size:32px;p font-size:16px;#foot

10、er font-size:12px;在本例中用繼承的計算后的值，倒不如用系數(shù)（1.5）現(xiàn)在所有繼承下來的元素使用基于font-size算出來的line-height再一次，line-height會隨著相關(guān)的font-size做相應(yīng)的比例縮放那么哪一種是最好的方案？一般來說，設(shè)置行高為值：純數(shù)字是最理想的方式。因為其會隨著對應(yīng)的font-size而放縮在多種情況下，很難確定一個完美的line-height，但無論如何，保守估計標(biāo)題是沒有段落那么的需要自適應(yīng)line-height舉例來說，所有內(nèi)容被定義為1.5，標(biāo)題被定義為1.2.body line-height:1.5 h1,h2,h3,h4,

11、h5,h6 line-height:1.2萬維網(wǎng)內(nèi)容可存取性指南（WCAG）2.0規(guī)定“段落中的行距至少要1.5倍”，這意味著如果要達(dá)到AAA等級，行高應(yīng)為1.5.深入line-height為了深入了解line-height,我們需要先來了解 CSS boxes的各種類型我們從一段簡單的HTML代碼開始 The emphasis element is defined as inline. 這些代碼在大多數(shù)瀏覽器下應(yīng)該會被渲染成下圖這個例子中涉及到4個boxesbox類型1：containing boxes這個例子中段落就是一種containing boxes，它包含了其他boxes。box類型

12、2：inline boxes在段落內(nèi)有一系列的inline boxesinline boxes 不會讓內(nèi)容顯示成塊形式，而是排成一行。emphasis 元素就是一種inline boxes其他沒有特別標(biāo)簽的box被稱為擬名inline boxesbox類型3：line boxesinline boxes在containing boxes里一個接一個組成了line boxesbox類型4：content areacontent area是圍繞著文字的看不見的一種box，他的高取決于font-sizeinline boxes與inline-height行高基于一則簡單小配方，應(yīng)用在inline b

13、oxes上。1.line-height和font-size的差別可以從下面的例子中看出例：font-size:16px;line-height:20px;差別：4px（即行間距）2.拆分行間距，來創(chuàng)建一個半行間距4px行間距/2 = 2px半行間距3.半行間距會被應(yīng)用在content area 的頂部和底部但有的時候情況會有一點(diǎn)點(diǎn)的復(fù)雜content box包裹著line box，而半行間距位于content box 的上部和下部。然而有時候inline box 會小于content area！舉例來說，如果line-height 小于 font-size，inline box 會優(yōu)先于行高例

14、：font-size:16px;line-height:12px;inline box 高度：12pxcontent area 會溢出，inline box的頂部和底部半行高會折疊起來以保證inline box的高度line box的一些注解line box的高度取決于它內(nèi)部最高的inline box （或被替換的元素）最高的inline box 可以是匿名inline box也是可以增加line-height后的inline box360docimg_42_還可以是更大font-size的inline box360docimg_43_或存在上標(biāo)或下標(biāo)360docimg_44_或，甚至存在可替換元素，例如一張圖360docimg_45_line box在containing box寬度內(nèi)靠著彼此的頸部堆積360docimg_46_最后，總結(jié)上標(biāo)和下標(biāo)上標(biāo)和下標(biāo)有時候會強(qiáng)制影響