溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css中行高是什么意思，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
在CSS中，行高是指包括內(nèi)容區(qū)與以內(nèi)容區(qū)為基礎(chǔ)對(duì)稱拓展的空白區(qū)域，也可以認(rèn)為是相鄰文本行基線間的垂直距離。行高可以利用line-height屬性來(lái)設(shè)置，該屬性不允許使用負(fù)值。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
行高是包括內(nèi)容區(qū)與以內(nèi)容區(qū)為基礎(chǔ)對(duì)稱拓展的空白區(qū)域。一般情況下，也可以認(rèn)為是相鄰文本行基線間的垂直距離。要想理解這句話首先得了解幾個(gè)基本知識(shí)：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css" >
span
{
padding:0px;
line-height:1.5;
}
</style>
</head>
<body>
<div class="test">
<div style="background-color:#ccc;">
<span style="font-size:3em;background-color:#999;">中文English</span>
<span style="font-size:3em;background-color:#999;">English中文</span>
</div>
</div>
</body>
<html>
從上到下四條線分別是頂線、中線、基線、底線，很像才學(xué)英語(yǔ)字母時(shí)的四線三格，我們知道vertical-align屬性中有top、middle、baseline、bottom，就是和這四條線相關(guān)。
尤其記得基線不是最下面的線，最下面的是底線。
行高是指上下文本行的基線間的垂直距離，即圖中兩條紅線間垂直距離。
行距是指一行底線到下一行頂線的垂直距離，即第一行粉線和第二行綠線間的垂直距離。
半行距是行距的一半，即區(qū)域3垂直距離/2，區(qū)域1，2，3，4的距離之和為行高，而區(qū)域1，2，4距離之和為字體size，所以半行距也可以這么算：（行高-字體size）/2
內(nèi)容區(qū)：底線和頂線包裹的區(qū)域，即下圖深灰色背景區(qū)域。
行內(nèi)框，每個(gè)行內(nèi)元素會(huì)生成一個(gè)行內(nèi)框，行內(nèi)框是一個(gè)瀏覽器渲染模型中的一個(gè)概念，無(wú)法顯示出來(lái)，在沒(méi)有其他因素影響的時(shí)候（padding等），行內(nèi)框等于內(nèi)容區(qū)域，而設(shè)定行高時(shí)行內(nèi)框高度不變，半行距【（行高-字體size）/2】分別增加/減少到內(nèi)容區(qū)域的上下兩邊（深藍(lán)色區(qū)域）
行框（line box），行框是指本行的一個(gè)虛擬的矩形框，是瀏覽器渲染模式中的一個(gè)概念，并沒(méi)有實(shí)際顯示。行框高度等于本行內(nèi)所有元素中行內(nèi)框最大的值（以行高值最大的行內(nèi)框?yàn)榛鶞?zhǔn)，其他行內(nèi)框采用自己的對(duì)齊方式向基準(zhǔn)對(duì)齊，最終計(jì)算行框的高度），當(dāng)有多行內(nèi)容時(shí)，每行都會(huì)有自己的行框。
<div style="background-color:#ccc;"> <span style="font-size:1em;background-color:#666;">中文English</span> <span style="font-size:3em;background-color:#999;">中文English</span> <span style="font-size:3em;background-color:#999;">English中文</span> <span style="font-size:1em;background-color:#666;">English中文</span> </div>
基本概念搞明白了我們就可以說(shuō)說(shuō)本文的主角line-height屬性了。
定義：line-height 屬性設(shè)置行間的距離（行高），不能使用負(fù)值。該屬性會(huì)影響行框的布局。在應(yīng)用到一個(gè)塊級(jí)元素時(shí)，它定義了該元素中基線之間的最小距離而不是最大距離。line-height 與 font-size 的計(jì)算值之差(行距)分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部?？梢园@些內(nèi)容的最小框就是行框。
可能的值
| 值 | 說(shuō)明 |
| normal | 默認(rèn),設(shè)置合理的行間距。 |
| number | 設(shè)置數(shù)字，此數(shù)字會(huì)與當(dāng)前的字體尺寸相乘來(lái)設(shè)置行間距。相當(dāng)于倍數(shù) |
| length | 設(shè)置固定的行間距。 |
| % | 基于當(dāng)前字體尺寸的百分比行間距。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 line-height 屬性的值。 |
貌似很簡(jiǎn)單，但感覺(jué)沒(méi)什么用出的樣子，那就讓我們看看line-height的幾個(gè)應(yīng)用
div居中對(duì)齊一直是個(gè)難題，水平還好解決些，margin：0 auto; 可以解決現(xiàn)代瀏覽器，IE下text-align:center。但垂直居中就沒(méi)那么簡(jiǎn)單了，默認(rèn)是這樣子的。
<div style="width:150px;height:100px;background-color:#ccc;"> <span>This is a test.<br/> This is a test. </span> </div>
我們可以利用line-block這樣做
<div style="width:150px;height:100px;line-height:100px;background-color:#ccc;font-size:0;"> <span style="display:inline-block;font-size:10px;line-height:1.4em;vertical-align:middle;">This is a test.<br/> This is a test. </span> </div>
單行就比較簡(jiǎn)單了，把line-height設(shè)置為box的大小可以實(shí)現(xiàn)單行文字的垂直居中
<div style="line-height:100px;border:dashed 1px #0e0;"> This is a test. </div>
行框高度是行內(nèi)最高的行內(nèi)框高度，通過(guò)line-height調(diào)整，內(nèi)容區(qū)行高與字體尺寸有關(guān)，padding不對(duì)行高造成影響。
<div style="border:dashed 1px #0e0;margin-bottom:30px;"> <span style="font-size:14px;background-color:#999;">This is a test</span> </div> <div style="border:dashed 1px #0e0;"> <span style="font-size:14px;padding:20px;background-color:#999;">This is a test</span> </div>
第二個(gè)span雖然因?yàn)閜adding原因內(nèi)容區(qū)變大，當(dāng)行高并未改變
行高是可繼承的，但并不是簡(jiǎn)單的copy父元素行高，繼承的是計(jì)算得來(lái)的值。
<div style="border:dashed 1px #0e0;line-height:150%;font-size:10px;"> <p style="font-size:30px;"> 1232<br/> 123 </p> </div>
按一般理解既然line-height可以繼承，那么p元素的行高也是150%了，可是事實(shí)是這樣的
非但沒(méi)有變成150%，反而連100%都沒(méi)有，重疊了！這就是繼承計(jì)算的結(jié)果，如果父元素的line-height有單位（px、%）,那么繼承的值則是換算后的一個(gè)具體的px級(jí)別的值；上例p得到的是10px*150%=15px的行高，而P的字體大小為30px，所以發(fā)生了重疊。
而如果屬性值沒(méi)有單位，則瀏覽器會(huì)直接繼承這個(gè)“因子（數(shù)值）”，而非計(jì)算后的具體值，此時(shí)它的line-height會(huì)根據(jù)本身的font-size值重新計(jì)算得到新的line-height 值。
<div style="border:dashed 1px #0e0;line-height:1.5;font-size:10px;"> <p style="font-size:30px;"> 1232<br/> 123 </p> </div>
所以在使用line-height時(shí)，除非你刻意否則盡量使用倍數(shù)設(shè)值
以上是“css中行高是什么意思”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼