css line height深入理解

line-height詳解
行高指的是文本行的基線間的距離,但是文本之間的空白距離不僅僅是行高決定的,同時也受字號的影響。
7.3.1 語法
line-height屬性的具體定義列表如下:
語法: line-height : normal | <實數(shù)> | <長度> | <百分比> | inherit
說明: 設(shè)置元素中行的高度。
值: normal:默認行高,一般為1到1.2; 實數(shù):實數(shù)值,縮放因子; 長度:合法的長度值,可為負數(shù); 百分比:百分比取值基于元素的字體尺寸。
初始值: normal
繼承性: 繼承
適用于: 所有元素
媒體: 視覺
計算值: 長度和百分比值為絕對值;其他同指定值。
行高指的是文本行的基線間的距離。而基線(Base line),指的是一行字橫排時下沿的基礎(chǔ)線,基線并不是漢字的下端沿,而是英文字母x的下 端沿,同時還有文字的頂線(Top line)、中線(Middle line)和底線(Bottom line),用以確定文字行的位置,如圖7-17 所示。
圖7-17 文字的基線
行高與字體尺寸的差稱為行距(leading),如圖7-18所示。
圖7-18 行高與行距
7.3.2 內(nèi)容區(qū)域、行內(nèi)框和行框
理論上講,一行中的每個元素都有一個內(nèi)容區(qū)域,它是由字體尺寸決定的,如圖7-19所示。
圖7-19 內(nèi)容區(qū)域
行內(nèi)元素會生成一個行內(nèi)框(inline box),行內(nèi)框只是一個概念,它無法顯示出來,但是它又確實存在。在沒有其他因素影響的時候,行內(nèi)框等于內(nèi)容區(qū)域,而設(shè)定行高則可以增加或者減少行內(nèi)框的高度,即:將行距的值(行高-字體尺寸)除以2,分別增加到內(nèi)容區(qū)域的上下兩邊,如圖7-20所示。
圖7-20 行內(nèi)框與行高
由于行高可以應用在任何元素上,因此同一行內(nèi)的若干元素可能有不同的行高和行內(nèi)框高,例如有如下代碼,其顯示如圖7-21所示。
(p style=”line-height:20px;”)行高20px。(strong style=”line-height:50px;”) 行高50px。(/strong)(span style=”line-height:30px;”)行高30px。(/span)(/p)
圖7-21 行內(nèi)框與行框
這里又有一個新的概念——行框(line box)。同行內(nèi)框類似,行框是指本行的一個虛擬的矩形框,其高度等于本行內(nèi)所有元素中行高最大的值。因此,當有多行內(nèi)容時,每行都會有自己的行框,如圖7-22所示。
圖7-22 多行內(nèi)容的行框
提示:理解行框和行內(nèi)框的概念對于學習本章[7.4垂直對齊:vertical-align屬性]一節(jié)的內(nèi)容非常重要。
注意:行框的高度只同本行內(nèi)元素的行高有關(guān),而和父元素的高度(height)無關(guān)。
7.3.3 行高的計算與繼承
以em、ex和百分比為單位的行高,其基數(shù)是元素本身的字體尺寸。例如有代碼如下:
(p style=”font-size:20px;line-height:2em;”)字高20px,行高2em。(/p) (p style=”font-size:30px;line-height:2em;”)字高30px,行高2em。(/p)
2個段落的行高都為2em,但是字體大小不同,因此顯示如圖7-23所示。
圖7-23 行高的計算
行高可以設(shè)定得比字體高度小,此時多行的文字將疊加到一起,例如有如下代碼,其顯示如圖7-24所示。
p { font-size : 20px; line-height :10px; }
(p)字高20px,行高10px。此時多行的文字將疊加到一起。(/p)
圖7-24 比字體高度小的行高
行高是可繼承的,但是繼承的是計算值,例如有如下代碼:
p { font-size :20px; line-height : 2em; }
p span { font-size : 30px; }
(p)字高20px。(span)字高30px。(/span)(/p)
(p)元素的行高2em,字體尺寸為20px,因此計算值為40px,雖然(span)元素本身的字體尺寸為30px,不過其繼承的行高仍為40px。但是在不同的瀏覽器內(nèi)顯示的效果卻不盡相同,如圖7-25所示。
圖7-25 行高的不同表現(xiàn)
由于繼承的是計算值,因此當元素內(nèi)的文字字體尺寸不一樣的時候,如果設(shè)定固定的行高很可能造成字體的重疊,例如有如下代碼,其顯示如圖7-26所示。
p { font-size : 20px; line-height : 1em; }
p span { font-size : 30px; }
(p)字高20px,行高1em,當文本為多行時可能會發(fā)生文字重疊的現(xiàn)象。(span)字高30px。(/span)(/p)
圖7-26行高繼承造成文字疊加
為了避免這種情況,可以為每個元素單獨定義行高,但是這樣很煩瑣,因此可以定義一個沒有單位的實數(shù)值作為縮放因子來統(tǒng)一控制行高,縮放因子是直接繼承的,而不是繼承計算值。例如修改上例中的行高為:
p { line-height : 1; }
則上例中的XHTML代碼顯示如圖7-27所示。
圖7-27縮放因子對行高的影響
當內(nèi)容中含有圖片的時候,如果圖片的高度大于行高,則含有圖片行的行框?qū)⒈粨伍_到圖片的高度,如圖7-28所示。
圖7-28 含有圖片的行
注意:圖片雖然撐開了行框,但是不會影響行高,因此也不會影響到基于行高來計算的其他屬性。
提示:當行內(nèi)含有圖片的時候,圖片和文字的垂直對齊方式默認是基線對齊,關(guān)于垂直對齊將在本章[7.4 垂直對齊:vertical-align屬性]一節(jié)中討論。
7.3.4 瀏覽器的差別與錯誤
瀏覽器在顯示的時候往往會有自己的表現(xiàn)形式,例如在Opera內(nèi),行高將按照CSS定義的將行距除以2增加到內(nèi)容區(qū)域的上下兩邊,而IE和Firefox則不是完全平分,如圖7-29所示。
圖7-29 不同瀏覽器對行高的顯示
不過,相差的1至2個像素在實際顯示中一般不會有太大的影響,因此可以忽略不計。比較嚴重的錯誤是IE 6.0對于含有圖片或者表單元等可替換行內(nèi)元素的行高失效的問題,不過,在IE 7.0中已經(jīng)修正了這個錯誤,但是其表現(xiàn)同其它瀏覽器也不相同。例如有如下代碼,其顯示如圖7-30所示。
#lineHeight4 p { line-height : 60px; }
#lineHeight4 fieldset{ border : 0; }
(div id=”lineHeight4″) (p)內(nèi)容含有圖片在[IE 6]內(nèi)瀏覽line-height將失效。(img src=”../../img/ddcat_anim.gif” _fcksavedurl="”../../img/ddcat_anim.gif”" _fcksavedurl="”../../img/ddcat_anim.gif”" alt=”圖片” width=”88″ height=”31″ /)(/p) (form id=”testForm” action=”#”) (fieldset) (p)(label for=”test1″)表單元素(/label)( input type=”text” maxlength=”16″ value=”IE6內(nèi)行高失效” /)(/p) (/fieldset) (/form) (/div)
圖7-30 包含替換元素的行高在IE內(nèi)失效
由圖7-30讀者可以發(fā)現(xiàn),IE 7.0中,將半行距分別加在了圖片的上下,而由于圖片默認是基線對齊,因此文字的基線下移了,這顯然不符合CSS中的規(guī)定。
對于IE 6.0中行高失效的問題,需要使用CSS Hack手段來針對IE 6.0設(shè)定替換元素的上下補白來修正。
提示:關(guān)于針對IE 6的CSS Hack,請參見本書[第16章:瀏覽器與Hack]。
7.3.5 應用:單行文字在垂直方向居中
在網(wǎng)頁設(shè)計中,往往為了突出標題而添加背景圖案,如圖7-31所示。
圖7-31 包含背景圖片的標題
假設(shè)此標題的XHTML代碼如下:
(div id=”#sample”) (h2)熱門帖大盤點(/h2) …… (/div)
此時如果只設(shè)定(h2)的背景圖片和高,則文字會偏上,如圖7-32所示。
圖7-32 未設(shè)定行高的標題文字
針對這個現(xiàn)象,一般只需要設(shè)定與高度相等的行高即可,相關(guān)代碼如下:
#sample h2 { height : 31px; line-height : 31px; …… }
此時在瀏覽器內(nèi)文字已經(jīng)在垂直位置上居中顯示,如圖7-33所示。
圖7-33 設(shè)定行高后的標題文字
此方法同樣可以運用在其他需要文字垂直居中顯示的地方,例如列表項、導航條等等。
上一小節(jié)講解了行高與單行純文字的垂直居中,而如果行內(nèi)含有圖片和文字,在瀏覽器內(nèi)瀏覽時,讀者可以發(fā)現(xiàn)文字和圖片在垂直方向并不是沿中線居中,而是沿基線對齊,如圖7-34所示。
圖7-34 文字和圖片內(nèi)容默認垂直對齊方式為基線對齊
這是因為,元素默認的垂直對齊方式為基線對齊(vertical-align: baseline)。
相關(guān)文章
如何實現(xiàn)div 圖片在DIV內(nèi)水平居中
本文介紹了div 圖片如何在DIV內(nèi)水平居中,無論文字居中、圖片居中等內(nèi)容居中我們都可以使用以上兩種方法實現(xiàn),一般推薦使用CSS進行,但網(wǎng)頁多時候,我們只需要修改CSS文件2021-11-30DIV CSS實現(xiàn)網(wǎng)頁背景半透明效果
DIV半透明實現(xiàn),使用CSS實現(xiàn)DIV成半透明效果,CSS實現(xiàn)層與背景半透明效果。本文通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2021-11-30- 新手在使用web標準(div css)開發(fā)網(wǎng)頁的時候,遇到第一個問題是div與span有什么區(qū)別,什么時候用div,什么時候用span標簽。下面小編就通過本文給大家講解下,感興趣的朋友2021-11-30
- 這篇文章主要介紹了設(shè)置div背景透明的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習2021-02-20
- 這篇文章主要介紹了CSS實現(xiàn)div不設(shè)高度完全居中,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習2021-02-04
- 這篇文章主要介紹了div自適應高度自動填充剩余高度,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學2020-07-08
詳解DIV+CSS的命名規(guī)矩才能有利于SEO優(yōu)化的實現(xiàn)方法
這篇文章主要介紹了DIV+CSS的命名規(guī)矩才能有利于SEO優(yōu)化的實現(xiàn)方法,需要的朋友可以參考下2018-11-15- 這篇文章主要介紹了DIV或者DIV里面的圖片水平與垂直居中的方法,需要的朋友可以參考下2018-11-15
- 這篇文章主要介紹了詳解如何用div實現(xiàn)自制滾動條,滾動條是瀏覽器中最常見的組件了。想要學習如何自制滾動條的方法,需要了解的朋友可以參考下2018-03-21
- Div布局是學習的重點,這篇文章主要為大家詳細介紹了div對齊與網(wǎng)頁布局的相關(guān)學習資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-31