深入瞭解css的行高Line Height屬性

先貼上原文地址:http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html

什麼是行間距?

古時候我們使用印刷機來出來文字。印刷出來的每個字,都位於獨立的一個塊中。

行間距,即傳說中控制兩行文字垂直距離的東東。在CSS中,line-height被用來控制行與行之間垂直距離。

不過,行間距與半行間距,還是取決於CSS中的line-height。那麼,如何來使用line-height呢?

默認狀態,瀏覽器使用1.0-1.2 line-height, 這是一個初始值。你可以定義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可以使用一個百分比的值body{line-height:120%;}

4.line-height可以被定義爲一個長度值(px,em等) body{line-height:25px;}

5.line-height也可以被定義爲純數字, body{line-height:1.2}

縮寫line-height

那5種line-height寫法,可以在font屬性中縮寫。line-height的值緊跟着font-size值使用斜槓分開,如:<font-size>/<line-height>

實例:body{font:100%/normal  arial;} , body{font:100%/120%  arial;} ,body{font:100%/1.2  arial;}  ,body{font:100%/25px  arial;} 

計算line-height

有些CSS屬性是可繼承的(inherited),從層疊的元素裏傳遞下來。這樣做是爲了方便開發者,不再爲後代元素重新設值。

對於line-height繼承有點複雜。

1、百分比

wKiom1X1lffz-wArAACcCrjTl20761.jpg

wKioL1X1mCnDI9__AADhcitzIn8369.jpg

wKiom1X1lfeDU8gZAAEnOHzG_oA537.jpg

wKioL1X1mCqC2jYwAAFNwRGW8kI011.jpg

2、長度

wKiom1X1lkHSRWJdAADEVmmQlWU840.jpg

wKiom1X1lkHy_IdSAACJc8PuYNM890.jpg

wKioL1X1mHSz41YxAAESfAylC1M560.jpg

wKioL1X1mHThqpn9AAFZencMvv4350.jpg

3、值:normal

wKiom1X1lsrRYUQxAAC_yJAbxDk596.jpg

wKioL1X1mPzQ8GF3AADmUW22x-8104.jpg

wKiom1X1lsqgjoE3AAE4vYpZo7s473.jpg

wKioL1X1mPyjMIlcAAFRe_niKKg031.jpg

wKiom1X1lsrypHMDAADzZwmLKcM868.jpg


4、純數字

wKioL1X1mYaSp2ThAADAf1-O5F8749.jpg

wKiom1X1l1TBVnt_AACcTmjiAOI629.jpg

wKiom1X1l1Sw8sS-AAEId_Rx6cI780.jpg

wKioL1X1mYfQwUAwAAFhFDDE2Eo247.jpg

wKiom1X1l1SwmAjVAAB0JrO6hRQ704.jpg

wKioL1X1mYeiyaQNAACeMY1lHLs166.jpg

wKiom1X1l1WCHM6TAADLE6HKFQE092.jpg

wKioL1X1mYejZrU5AAC4w8nA8wA883.jpg

wKiom1X1l1WBuzD9AADk468UvBk736.jpg

wKioL1X1pFWzHmPBAAB49WbakIY499.jpg

wKioL1X1mYnREmMcAADKKg8WENM996.jpg

wKiom1X1l1fBNTExAACtWDtUPBc493.jpg

wKioL1X1mYqRr-60AADnlYzD8os441.jpg

wKiom1X1ou7DZs6HAACTU-DiIBY035.jpg

wKioL1X1pSGyx640AACnFpuDb0k979.jpg

wKiom1X1ou7z7d-GAAD68TAK1P8270.jpg

wKiom1X1ou_zt6C6AACQpgezgjY523.jpg

wKioL1X1pSHgqT1IAADmekIh5OU984.jpg

wKiom1X1ou_y5QF7AADHJExRGBU745.jpg

wKioL1X1pSGCBLzLAADaZznnSb4607.jpg

wKiom1X1ou-DmdF5AAD_zk1-tGo313.jpg

wKioL1X1pSLA46K7AACLXFT1nSw545.jpg

wKiom1X1ozmRZksEAAEGJFvW9n4678.jpg

wKiom1X1ovGhvwRoAACShs-sG6c955.jpg

wKioL1X1pSTg1klbAADxEjjRwM0955.jpg

wKiom1X1ovHihmz_AACTkMG5VZk010.jpg

wKioL1X1pSTA_7KVAADU6BywMTY375.jpg

wKiom1X1ovLRp2QwAACouZIE8Fo140.jpg

wKioL1X1pSSgw3GvAAB6Emrxavk724.jpg

wKiom1X1ovLjd1VcAADmqRDit5c461.jpg

wKioL1X1pSSwKnlwAADBTslWFwI954.jpg

wKioL1X1paTAaUugAADp_nTMQNE811.jpg

wKiom1X1ovSiPsaCAAC-ixnohbk878.jpg

wKioL1X1pSbwne3BAACzr1X44FA838.jpg

wKiom1X1ovTiA6E5AAEr750AfUk308.jpg

wKioL1X1pSagWNk2AACQS0uSVr0834.jpg

wKiom1X1ovTiFZYKAADJFk_eRN8159.jpg

wKioL1X1pSeh2V58AACs2Dgdslg159.jpg

wKiom1X1ovSRMRqwAADBhLFm1xM082.jpg

wKioL1X1pSfA6MIzAADAQf1Qvl0256.jpg

wKiom1X1o86AmiJoAACQB0luuWY569.jpg

wKioL1X1pSjgbaKZAADRcGudcRU061.jpg


(但實戰應用在中文字體或中英文字體混合,以及IE678,XP win7裏,行高規則又有所不同,淚流滿面)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章