CSS行高:line-height屬性詳解
行高的概念看上去很簡單——文字行的高度,其實,行高所涉及到的基礎知識,對於今後理解其它屬性也很重要。
大片密密麻麻的文字往往會讓人覺得乏味,因此適當地調整行高(line-height)可以減低閱讀的困難與枯燥,並且使頁面顯得美觀。行高指的是文字行的基線間的距離,但是文字之間的空白距離不僅僅是行高決定的,同時也受字號的影響。
7.3.1 語法
line-height屬性的具體定義列表如下:
語法: line-height : normal | <實數> | <長度> | <百分比> | inherit
說明: 設定元素中行的高度。
值: normal:預設行高,一般為1到1.2;
實數:實數值,縮放因子;
長度:合法的長度值,可為負數;
百分比:百分比取值基於元素的字型尺寸。
初始值: normal
繼承性: 繼承
適用於: 所有元素
媒體: 視覺
計算值: 長度和百分比值為絕對值;
其他同指定值 行高指的是文字行的基線間的距離。而基線(Base line),指的是一行字橫排時下沿的基礎線,基線並不是漢字的下端沿,而是英文字母x的下 端沿,同時還有文字的頂線(Top line)、中線(Middle line)和底線(Bottom line),用以確定文字行的位置,如圖7-17 所示。
圖7-17 文字的基線 行高與字型尺寸的差稱為行距(leading),如圖7-18所示。
7.3.2 內容區域、行內框和行框
理論上講,一行中的每個元素都有一個內容區域,它是由字型尺寸決定的,如圖7-19所示。
圖7-19 內容區域 行內元素會生成一個行內框(inline box),行內框只是一個概念,它無法顯示出來,但是它又確實存在。在沒有其他因素影響的時候,行內框 等於內容區域,而設定行高則可以增加或者減少行內框的高度,即:將行距的值(行高-字型尺寸)除以2,分別增加到內容區域的上下兩邊,如圖7-20所示。
圖7-20 行內框與行高
由於行高可以應用在任何元素上,因此同一行內的若干元素可能有不同的行高和行內框高,例如有如下程式碼,其顯示如圖7-21所示。
圖7-21 行內框與行框
這裡又有一個新的概念——行框(line box)。同行內框類似,行框是指本行的一個虛擬的矩形框,其高度等於本行內所有元素中行高最大的值。因此,當有多行內容時,每行都會有自己的行框,如圖7-22所示。
圖7-22 多行內容的行框
提示:理解行框和行內框的概念對於學習本章[7.4垂直對齊:vertical-align屬性]一節的內容非常重要。 注意:行框的高度只同本行內元素的行高有關,而和父元素的高度(height)無關。
7.3.3 行高的計算與繼承 以em、ex和百分比為單位的行高,其基數是元素本身的字型尺寸。例如有程式碼如下:
<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 行高的計算
行高可以設定得比字型高度小,此時多行的文字將疊加到一起,例如有如下程式碼,其顯示如圖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。但是在不同的瀏覽器內顯示的效果卻不盡相同,如圖7-25所示。
圖7-25 行高的不同表現
由於繼承的是計算值,因此當元素內的文字字型尺寸不一樣的時候,如果設定固定的行高很可能造成字型的重疊,例如有如下程式碼,其顯示如圖7-26所示。
p { font-size : 20px; line-height : 1em; } p span { font-size : 30px; } <p>字高20px,行高1em,當文字為多行時可能會發生文字重疊的想象。<span>字高30px。</span></p>圖7-26行高繼承造成文字疊加
為了避免這種情況,可以為每個元素單獨定義行高,但是這樣很煩瑣,因此可以定義一個沒有單位的實數值作為縮放因子來統一控制行高,縮放因子是直接繼承的,而不是繼承計算值。例如修改上例中的行高為:
p { line-height : 1; }則上例中的XHTML程式碼顯示如圖7-27所示。
圖7-27縮放因子對行高的影響
當內容中含有圖片的時候,如果圖片的高度大於行高,則含有圖片行的行框將被撐開到圖片的高度,如圖7-28所示。
圖7-28 含有圖片的行
注意:圖片雖然撐開了行框,但是不會影響行高,因此也不會影響到基於行高來計算的其他屬性。 提示:當行內含有圖片的時候,圖片和文字的垂直對齊方式預設是基線對齊。
7.3.4 瀏覽器的差別與錯誤
瀏覽器在顯示的時候往往會有自己的表現形式,例如在Opera內,行高將按照CSS定義的將行距除以2增加到內容區域的上下兩邊,而IE和Firefox則不是完全平分,如圖7-29所示。
圖7-29 不同瀏覽器對行高的顯示
不過,相差的1至2個畫素在實際顯示中一般不會有太大的影響,因此可以忽略不計。 比較嚴重的錯誤是IE 6.0對於含有圖片或者表單元等可替換行內元素的行高失效的問題,不過,在IE 7.0中已經修正了這個錯誤,但是其表現同其它瀏覽器也不相同。
例如有如下程式碼,其顯示如圖7-30所示。
#lineHeight4 p { line-height : 60px; } #lineHeight4 fieldset{ border : 0; } <div id="lineHeight4"> <p>內容含有圖片在[IE 6]內瀏覽line-height將失效。<img src="../../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內行高失效" /></p> </fieldset> </form> </div>圖7-30 包含替換元素的行高在IE內失效
由圖7-30讀者可以發現,IE 7.0中,將半行距分別加在了圖片的上下,而由於圖片預設是基線對齊,因此文字的基線下移了,這顯然不符合CSS中的規定。 對於IE 6.0中行高失效的問題,需要使用CSS Hack手段來針對IE 6.0設定替換元素的上下補白來修正。 提示:關於針對IE 6的CSS Hack,請參見本書[第16章:瀏覽器與Hack]。
7.3.5 應用:單行文字在垂直方向居中
在網頁設計中,往往為了突出標題而新增背景圖案,如圖7-31所示。
圖7-31 包含背景圖片的標題
假設此標題的XHTML程式碼如下:
<div id=”#sample”> <h2>熱門帖大盤點</h2> ……</div>此時如果只設定<h2>的背景圖片和高,則文字會偏上,如圖7-32所示。
圖7-32 未設定行高的標題文字
針對這個現象,一般只需要設定與高度相等的行高即可,相關程式碼如下:
#sample h2 { height : 31px; line-height : 31px; …… }此時在瀏覽器內文字已經在垂直位置上居中顯示,如圖7-33所示。
圖7-33 設定行高後的標題文字
此方法同樣可以運用在其他需要文字垂直居中顯示的地方,例如列表項、導航條等等。
相關推薦
CSS行高:line-height屬性詳解
行高的概念看上去很簡單——文字行的高度,其實,行高所涉及到的基礎知識,對於今後理解其它屬性也很重要。 大片密密麻麻的文字往往會讓人覺得乏味,因此適當地調整行高(line-height)可以減低閱讀的困難與枯燥,並且使頁面顯得美觀。行高指的是文字行的基線間的距離,但是文字之間的空白距離不僅僅是行高決定的,同時
32 行高 1 line-height 行高 2 在font中也可以指定行高,如果不指定則按默認的值
http image alt height com ima 分享圖片 bubuko lin 1 2 32 行高 1 line-height 行高 2 在font中也可以指定行高,如果不指定則按默認的值
linux每日命令(26):Linux檔案屬性詳解
Linux 檔案或目錄的屬性主要包括:檔案或目錄的節點、種類、許可權模式、連結數量、所歸屬的使用者和使用者組、最近訪問或修改的時間等內容。具體情況如下: 命令: ls -lih 輸出: [[email protected] test]# ls -lih total 0 51621141 dr
每天一個 Linux 命令(25):Linux 檔案屬性詳解
Linux 檔案或目錄的屬性主要包括:檔案或目錄的節點、種類、許可權模式、連結數量、所歸屬的使用者和使用者組、最近訪問或修改的時間等內容。具體情況如下: 命令: ls -lih 輸出: [root@localhost test]# ls -li
網頁中內容的滾動 :marquee標籤屬性詳解
<marquee direction=up behavior=scroll loop=3 scrollamount=1 scrolldelay=10 align=top bgcolor=#ffffff height=300 width=30% hspace=20 vspace=10 onmouseo
css的行高Line Height屬性
1.line-height可以被定義為:body{line-height:normal;} 2.line-height可以被定義為:body{line-height:inherit;} 3.line-
css行高line-height的一些深入理解及應用
out spa 行高 定義 blank 分享 tac 而且 -s 聲明:此文為轉載,點擊查看原文,原文發布日期為2009年,僅供大家參考,如有侵權24小時內刪除,聯系QQ:1522025433。 一、前言 前兩天在騰訊ISD團隊博客上看到一篇翻譯的文章“深入理解css 行高
CSS行高——line-height 文字的垂直居中(display:block;情況下)
初入前端的時候覺得CSS知道display、position、float就可以在佈局上游刃有餘了,隨著以後工作問題層出不窮,才逐漸瞭解到CSS並不是幾個style屬性那麼簡單,最近看了一些關於行高的知識,就此總結一下。 所謂行高是指文字行基線間的垂直距離。要想理解這句話
關於CSS:line-height
前言 先上結論: 如果為塊級元素設定height則其擁有高度 如果沒有為塊級元素設定height元素中有文字且為該元素設定line-height則其擁有高度 在第二種情況下文字的水平中線與塊級元素的line-height中線是同一條(同一高度) 正文 元素的高度是由什麼決定對於我們解
line-height屬性遇到的問題
line height 最近在學習html+css基礎,這兩天在編寫頁面的時候,發現有時候使用line-height屬性,會變成行間距變的很大的情況,在這裏寫下總結,由於電腦系統過於low,有些圖片就稍後在附加,進入正題:情況一: 當在一個塊中,有一行文字,想要它垂直居中的話,使用我們平常的
css動畫-animation各個屬性詳解(轉)
yellow range 空隙 定義 tro content bin ora .com CSS3的animation很容易就能實現各種酷炫的動畫,雖然看到別人的成果圖會覺得很難,但是如果掌握好各種動畫屬性,做好酷炫吊炸天的動畫都不在話下,好,切入正題。 一、動畫屬性:
Android零基礎入門第80節:Intent 屬性詳解(下)
gre save top log 單選按鈕 bar 手機 彩信 ttext 上一期學習了Intent的前三個屬性,本期接著學習其余四個屬性,以及Android系統常用內置組件的啟動。 四、Data和Type屬性 Data屬性通常用於向Action屬性提
css屬性詳解
borde 控制 float 有趣 外邊距 cos 不起作用 普通 多個 一、字體屬性 字體 font-family可以把多個字體名稱作為一個“回退”系統來保存。如果瀏覽器不支持第一個字體,則會嘗試下一個。瀏覽器會使用它可識別
CSS display 屬性詳解
body pos strong color copy 基本上 attribute -h 覆蓋 display的所有屬性 {/* CSS 1 */ display: none; display: inline; display: block; display: list-it
CSS中margin屬性詳解
ces inpu 語法 概述 普通 utf-8 blue 單選按鈕 order margin屬性概述margin是CSS層疊樣式表中用來規定圍繞在元素邊框周圍空白區域範圍的屬性. 該接受任何長度單位,可以是像素、英寸、毫米或 em。 相關屬性margin 可以單獨改變元素的
css float屬性詳解
rev ger 由於 src 水平 left 填充 圖像 eve 定義和用法 float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像,使文本圍繞在圖像周圍,不過在 CSS 中,任何元素都可以浮動。浮動元素會生成一個塊級框,而不論它本身是何種元素。如果浮動非替換元
Android 開發:(七)常用佈局屬性詳解
第一類:屬性值為true或false android:layout_centerHrizontal 水平居中 android:layout_centerVertical 垂直居中 android:layout_centerInparent 相對於父元素完全居中 androi
***獲取螢幕寬高 :width(),height(),clientHeight,clientWidth 獲取寬高的區別*
獲取螢幕寬高 :width(),height(),clientHeight,clientWidth 獲取寬高的區別 $(window).width() & $(window).height():獲得的是螢幕可視區域的寬高,不包括滾動條與工具條。 $(window).heigh
CSS----z-index 屬性詳解
用途: z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。 該屬性設定一個定位元素沿 z 軸的位置,z 軸定義為垂直延伸到顯示區的軸。 注意: z-index 屬性值可以是負的, 如果為正數,則離使用者更近,為負數則表示離使用者更遠。
DW中CSS屬性詳解
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!