css中行高是什么意思
小編給大家分享一下css中行高是什么意思，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)建站主要從事網(wǎng)頁設(shè)計、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、響應(yīng)式網(wǎng)站設(shè)計、程序開發(fā)、網(wǎng)站優(yōu)化、微網(wǎng)站、小程序設(shè)計等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)站設(shè)計、網(wǎng)絡(luò)營銷經(jīng)驗，集策劃、開發(fā)、設(shè)計、營銷、管理等多方位專業(yè)化運作于一體。
在CSS中，行高是指包括內(nèi)容區(qū)與以內(nèi)容區(qū)為基礎(chǔ)對稱拓展的空白區(qū)域，也可以認(rèn)為是相鄰文本行基線間的垂直距離。行高可以利用line-height屬性來設(shè)置，該屬性不允許使用負(fù)值。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
行高是包括內(nèi)容區(qū)與以內(nèi)容區(qū)為基礎(chǔ)對稱拓展的空白區(qū)域。一般情況下，也可以認(rèn)為是相鄰文本行基線間的垂直距離。要想理解這句話首先得了解幾個基本知識：
頂線、中線、基線、底線
Test
span
{
padding:0px;
line-height:1.5;
}
中文English
English中文
從上到下四條線分別是頂線、中線、基線、底線，很像才學(xué)英語字母時的四線三格，我們知道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ū)、行內(nèi)框、行框
內(nèi)容區(qū)：底線和頂線包裹的區(qū)域，即下圖深灰色背景區(qū)域。
行內(nèi)框，每個行內(nèi)元素會生成一個行內(nèi)框，行內(nèi)框是一個瀏覽器渲染模型中的一個概念，無法顯示出來，在沒有其他因素影響的時候（padding等），行內(nèi)框等于內(nèi)容區(qū)域，而設(shè)定行高時行內(nèi)框高度不變，半行距【（行高-字體size）/2】分別增加/減少到內(nèi)容區(qū)域的上下兩邊（深藍(lán)色區(qū)域）
行框（line box），行框是指本行的一個虛擬的矩形框，是瀏覽器渲染模式中的一個概念，并沒有實際顯示。行框高度等于本行內(nèi)所有元素中行內(nèi)框最大的值（以行高值最大的行內(nèi)框為基準(zhǔn)，其他行內(nèi)框采用自己的對齊方式向基準(zhǔn)對齊，最終計算行框的高度），當(dāng)有多行內(nèi)容時，每行都會有自己的行框。
中文English
中文English
English中文
English中文
定義：line-height 屬性設(shè)置行間的距離（行高），不能使用負(fù)值。該屬性會影響行框的布局。在應(yīng)用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。line-height 與 font-size 的計算值之差(行距)分為兩半，分別加到一個文本行內(nèi)容的頂部和底部?？梢园@些內(nèi)容的最小框就是行框。
div居中對齊一直是個難題，水平還好解決些，margin：0 auto; 可以解決現(xiàn)代瀏覽器，IE下text-align:center。但垂直居中就沒那么簡單了，默認(rèn)是這樣子的。
行框高度是行內(nèi)最高的行內(nèi)框高度，通過line-height調(diào)整，內(nèi)容區(qū)行高與字體尺寸有關(guān)，padding不對行高造成影響。
非但沒有變成150%，反而連100%都沒有，重疊了！這就是繼承計算的結(jié)果，如果父元素的line-height有單位（px、%）,那么繼承的值則是換算后的一個具體的px級別的值；上例p得到的是10px*150%=15px的行高，而P的字體大小為30px，所以發(fā)生了重疊。
而如果屬性值沒有單位，則瀏覽器會直接繼承這個“因子（數(shù)值）”，而非計算后的具體值，此時它的line-height會根據(jù)本身的font-size值重新計算得到新的line-height 值。
以上是“css中行高是什么意思”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
重慶分公司
重慶分公司
