這篇文章主要介紹“css line-height屬性的使用方法”，在日常操作中，相信很多人在css line-height屬性的使用方法問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css line-height屬性的使用方法”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

10余年的安寧網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)整合營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整安寧建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“安寧網(wǎng)站設(shè)計(jì)”,“安寧網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

css中用于設(shè)置行高的屬性，line-height屬性。

第一，對(duì)CSS3的選擇器和類似header、nav、footer等標(biāo)簽不兼容，在不使用插件和JS處理的情況下，從純CSS的角度來(lái)切入，可以采用類名來(lái)做定義，這是常用的替代方案。

項(xiàng)目中，針對(duì)元素背景不支持顏色漸變的情況，折中的方案是給其一個(gè)最合適的背景色，這樣使得背景色和文字顏色能有個(gè)基本的對(duì)比和區(qū)分，不至于影響用戶的閱讀和正常瀏覽。
例如：

代碼如下:

header.sub-hd{  
   position:relative;  
   height:40px;  
   background-image:-moz-linear-gradient(top, #13b9fd, #0183c3);  
   background-image:-o-linear-gradient(top, #13b9fd, #0183c3);  
   background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#13b9fd),color-stop(1,#0183c3));  
   box-shadow:inset 0 1px 4px #6cd5ff;  
   -moz-box-shadow:inset 0 1px 4px #6cd5ff;  
   -webkit-box-shadow:inset 0 1px 4px #6cd5ff;  
   text-align:center;  
   font-size:15px;  
   background-color:#099ddf;/*opera mobile不支持漸變的折中方案*/  
}

針對(duì)IE6不識(shí)別html5標(biāo)簽的方法
 

代碼如下:

<script>  
(function(){  
   var e ="abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;  
   while(i--){  
       document.createElement(e[i]);  
   }  
})();  
</script>

第二，我們經(jīng)常使用line-height屬性，定義行高，尤其是需要設(shè)置垂直居中的時(shí)候，常常讓height屬性與line-height屬性相同。而且其是可以繼承的，一篇文章的父標(biāo)簽定義了行高屬性，其子段落元素就不需要再次進(jìn)行聲明?？墒牵灿欣獾那闆r。比如在Opera Mobile瀏覽器，就必須要再次聲明，才能生效。

例子：
1，html代碼

代碼如下:

<div class="test"><h3>測(cè)試標(biāo)題在Opera Mobile下的寬高</h3></div>

2，CSS代碼

代碼如下:

<style>  
.test{width:100%;height:40px;line-height:40px!important;background-color:black;color:#eee; opacity:0.5;}  
.test h3{border:1px solid red;}  
</style>

從手機(jī)上看頁(yè)面效果：不居中！
通過(guò)觀察紅色邊框大小，知道內(nèi)標(biāo)簽h3的呈現(xiàn)高度與實(shí)際呈現(xiàn)的line-height一致，都不是我們父div定義的數(shù)值。

然后，我們給h3加上line-height屬性值，可以設(shè)置為line-height:inherit或者line-height:40px;
1，CSS代碼：

代碼如下:

<style>  
.test{width:100%;height:40px;line-height:40px!important;background-color:black;color:#eee; opacity:0.5;}  
.test h3{line-height:inherit;border:1px solid red;}  
</style>

查看效果，竟然沒(méi)有變化，依然沒(méi)有垂直居中。這是為什么呢？
莫非是瀏覽器自身默認(rèn)的屬性優(yōu)先級(jí)高過(guò)了當(dāng)前的屬性優(yōu)先級(jí)。

更改一下優(yōu)先級(jí)：

代碼如下:

<style>  
.test{width:100%;height:40px;line-height:40px!important;background-color:black;color:#eee; opacity:0.5;}  
.test h3{line-height:inherit!important;border:1px solid red;}  
</style>

再看，果然可以了。垂直居中了。
由此我們頁(yè)可以印證另一種說(shuō)法：對(duì)于一個(gè)空容器，寫入內(nèi)容容器被撐開有了高度寬度，但實(shí)際上根本不是文字撐開了div的高度，而是line-height屬性。
CSS中起高度作用的主要是height以及l(fā)ine-height了吧！如果一個(gè)標(biāo)簽沒(méi)有定義height屬性(包括百分比高度)，那么其最終表現(xiàn)的高度一定是由line-height起作用，即使是IE6下11像素左右默認(rèn)高度bug也是如此。

至于內(nèi)部的機(jī)理，看這里很形象的表述：

到底這個(gè)line-height行高怎么就產(chǎn)生了高度呢？在inline box模型中，有個(gè)line boxes，這玩意是看不見的，這個(gè)玩意的工作就是包裹每行文字。一行文字一個(gè)line boxes。例如“艾佛森退役”這5個(gè)字，如果它們?cè)谝恍酗@示，你艾佛森再牛逼，對(duì)不起，只有一個(gè)line boxes罩著你；但“春哥純爺們”這5個(gè)字，要是豎著寫，一行一個(gè)，那真是夠爺們，一個(gè)字罩著一個(gè)line boxes，于是總計(jì)五個(gè)line boxes。line boxes什么特性也沒(méi)有，就高度。所以一個(gè)沒(méi)有設(shè)置height屬性的div的高度就是由一個(gè)一個(gè)line boxes的高度堆積而成的。

其實(shí)line boxes不是直接的生產(chǎn)者，屬于中層干部，真正的活兒都是它的手下 &ndash; inline boxes干的，這些手下就是文字啦，圖片啊，span之類的inline屬性的標(biāo)簽啦。line boxes只是個(gè)考察匯報(bào)人員，考察它的手下誰(shuí)的實(shí)際line-height值最高，誰(shuí)最高，它就要誰(shuí)的值，然后向上匯報(bào)，形成高度。
例如：

代碼如下:

<span >取手下line-height<span >最高</span>的值</span>。

則line boxes的高度就是40像素了。
雖然所有瀏覽器都支持 line-height 屬性。但是任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。因此在實(shí)際中，我們最好還是用數(shù)值定義line-height。

在本例中即為

代碼如下:

<style>  
.test{width:100%;height:40px;line-height:40px!important;background-color:black;color:#eee; opacity:0.5;}  
.test h3{line-height:40px!important;border:1px solid red;}  
</style>

當(dāng)然，還有一種折中的辦法，可以將內(nèi)容高度設(shè)為瀏覽器默認(rèn)行高差不多的數(shù)值，其余不足的用padding補(bǔ)齊，這樣在Opera mobile下，繼承瀏覽器的21px默認(rèn)行高，就不需要通過(guò)加important標(biāo)記覆蓋瀏覽器默認(rèn)值了。同時(shí)，在其他標(biāo)準(zhǔn)瀏覽器我們?yōu)槠渥釉刂付ㄒ粋€(gè)同樣的行高，這樣就能做到暫時(shí)兼容opera mobile 和其他所有標(biāo)準(zhǔn)的瀏覽器

瀏覽器默認(rèn)行高各不相同，一般范圍在16px~21px之間。

例子：
 

代碼如下:

<header class="sub-hd">  
   <div class="tit">應(yīng)用信息</div>  
</header>
header.sub-hd{  
   position:relative;  
   /*height:40px;*/  
   height:21px;  
   padding:9px 0;  
   background-image:-moz-linear-gradient(top, #13b9fd, #0183c3);  
   background-image:-o-linear-gradient(top, #13b9fd, #0183c3);  
   background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#13b9fd),color-stop(1,#0183c3));  
   box-shadow:inset 0 1px 4px #6cd5ff;  
   -moz-box-shadow:inset 0 1px 4px #6cd5ff;  
   -webkit-box-shadow:inset 0 1px 4px #6cd5ff;  
   text-align:center;  
   font-size:15px;  
   background-color:#099ddf;/*opera mobile不支持漸變的折中方案*/  
}  
header .tit{  
   -webkit-box-sizing:border-box;  
   position:absolute;  
   left:50%;  
   width:150px;  
   /*height:39px;line-height:39px; */  
   line-height:21px;  
   margin-left:-75px;  
   color:#fff;  
   text-shadow:0 1px 0 #333;  
   font-weight:bold;  
   overflow:hidden;  
   font-size:18px;  
}

當(dāng)然這種辦法并不是最佳的解決途徑，只是權(quán)宜之計(jì)。最好還是采用上面的優(yōu)先級(jí)設(shè)定，通用。

還是有問(wèn)題！

先來(lái)溫習(xí)一下line-height屬性可能的值：
normal，默認(rèn)。
number 數(shù)字，此數(shù)字會(huì)與當(dāng)前的字體尺寸相乘來(lái)設(shè)置行間距。
length     設(shè)置固定的行間距。單位em，px，pt等等。
百分比% ，基于當(dāng)前字體尺寸的百分比行間距。
inherit ，規(guī)定應(yīng)該從父元素繼承 line-height 屬性的值。

line-heignt不能是負(fù)數(shù)，line-height 屬性設(shè)置行間的距離（行高）。會(huì)影響行框的布局。在應(yīng)用到一個(gè)塊級(jí)元素時(shí)，它定義了該元素中基線之間的最小距離而不是最大距離。

line-height 與 font-size 的計(jì)算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部。可以包含這些內(nèi)容的最小框就是行框。

原始數(shù)字值指定了一個(gè)縮放因子，后代元素會(huì)繼承這個(gè)縮放因子而不是計(jì)算值。

行高指的是文本行的基線間的距離。而基線（Base line），指的是一行字橫排時(shí)下沿的基礎(chǔ)線，基線并不是漢字的下端沿，而是英文字母x的下 端沿，同時(shí)還有文字的頂線（Top line）、中線（Middle line）和底線（Bottom line），用以確定文字行的位置

行高與字體尺寸的差稱為行距（leading）

使用行高代替高度避免haslayout：在某些情形下，line-height可以和height互換，因?yàn)閷?shí)現(xiàn)的效果一樣。都能撐開一個(gè)高度，然而這兩個(gè)css屬性有一個(gè)較隱蔽的差異，就是使用height會(huì)使標(biāo)簽haslayout，而使用line-height則不會(huì)。以前只有IE6的時(shí)候曾流行使用height清除浮動(dòng)，就是利用了IE下height使haslayout的屬性。但有時(shí)候，haslayout并不需要，反而要避免。

都喜歡給line-height帶單位，但是在一些情況下會(huì)出現(xiàn)問(wèn)題，看例子：
 

代碼如下:

<style type="text/css">  
.demo{line-height:150%;}  
pre{font-size:30px;}  
</style>  
<div class="demo">  
   <pre>  
   第一行  
   第二行  
   </pre>  
</div>

兩行文字發(fā)生了重疊。
為什么帶單位的line-height繼承，有可能會(huì)發(fā)生重疊的現(xiàn)象呢？

如果line-height屬性值有單位，那么繼承的值則是換算后的一個(gè)具體的px級(jí)別的值；而如果屬性值沒(méi)有單位，則瀏覽器會(huì)直接繼承這個(gè)“因子（數(shù)值）”，而非計(jì)算后的具體值，此時(shí)它的line-height會(huì)根據(jù)本身的font-size值重新計(jì)算得到新的line-height 值。

上例中的div的line-height為150%，由于默認(rèn)情況的字體大小為16px，所以div的具體line-height值可換算為16px*150%=24px，由于pre的line-height會(huì)繼承24px這個(gè)換算過(guò)后的具體值，此時(shí)pre又被重新定義了font-size:30px;字體大小超過(guò)了line-height的大小，于是發(fā)生重疊。其它單位原理一樣。

因此建議，養(yǎng)成給line-height不帶單位的習(xí)慣，如line-height:1.5;這種寫法避免重疊。

在顯示文章的box里，px的表示方法首先是要被淘汰的。因?yàn)槲恼吕锩娴奈淖质怯写笥行〉?，使用px定值，由于繼承性，無(wú)法實(shí)現(xiàn)根據(jù)文字大小自動(dòng)調(diào)整間距，會(huì)出現(xiàn)大號(hào)文字重疊的現(xiàn)象。normal也是不行的，一般文章顯示最好是650像素的寬度，1.5倍的行距較好。

一般瀏覽器的normal值在1~1.2之間，使用normal必然文字間距過(guò)小，閱讀吃力。
百分值也有繼承性，但是有個(gè)很搓的辦法可以實(shí)現(xiàn)文字間距自動(dòng)適應(yīng)于文字的大小，那就是使用“*”通配符，例如：.article_box *{line-height:150%;}就不會(huì)出現(xiàn)文字重疊的情況了。

到此，關(guān)于“css line-height屬性的使用方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

網(wǎng)站欄目：cssline-height屬性的使用方法
網(wǎng)站地址：http://aaarwkj.com/article26/jpoocg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)公司、外貿(mào)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)