欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

深入理解CSS行高line-height與文本垂直居中的原理

  發(fā)布時(shí)間:2016-08-12 11:27:50   作者:佚名   我要評(píng)論
本文詳細(xì)介紹了CSS行高屬性line-height與文本垂直居中的原理,通過本文的介紹相信對(duì)大家以后使用line-height和設(shè)置文本垂直居中會(huì)更加熟練,有需要的可以參考借鑒。下面一起來看看。

前言
在CSS中,line-height 屬性設(shè)置兩段段文本之間的距離,也就是行高,如果我們把一段文本的line-height設(shè)置為父容器的高度就可以實(shí)現(xiàn)文本垂直居中了,比如下面的例子:


復(fù)制代碼
代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 300px;
height: 200px;
border: 1px solid red;
}
span {
line-height: 200px;
}
</style>
</head>
<body>
<div>
<span>文本垂直居中原理</span>
</div>
</body>
</html>

這樣,span標(biāo)簽中的文字就相對(duì)于div垂直方向居中了,想要文本水平居中設(shè)置text-align:center即可。

那么,它怎么就垂直居中了?為了弄清楚它,下面我們先來看幾個(gè)概念。

1. 行框
在瀏覽器中,會(huì)將給每一段文本生成一個(gè)行框,行框的高度就是行高。行框由上間距、文本高度、下間距組成,上間距的距離與下間距的距離是相等的。

默認(rèn)情況下一行文本的行高分為:上間距,文本的高度,下間距,并且上間距是等于下間距的,所以文字默認(rèn)在這一行中是垂直居中的。

2. 文本中的幾條線

幾條線與行高的關(guān)系圖解:

文本的行高也可以看成是基線到基線的距離。

如果一段文本的高度為16px,如果給他設(shè)置line-height的高度為200,那么相當(dāng)于,文本的上下間距的高度增加了,但是文本本身的高度依然是16是不變的,并且一直默認(rèn)在行框中垂直居中,而上間距和下間距平分了200px的高度并且減去文本本身的高度。所以,容器被這一行文本占滿,而本身文字在自己的一行中是垂直居中的,所以看起來就像是在容器中垂直居中。

3. Chrome瀏覽器的默認(rèn)值
谷歌瀏覽器字體的默認(rèn)大小是:16px,字體的最小值為:12px,默認(rèn)行高為:18px;默認(rèn)情況下如果沒有給div設(shè)置高度,那么這個(gè)div的高度會(huì)比其中文本的大小大一點(diǎn)(這個(gè)大多少現(xiàn)在沒有辦法確定)

4. 行高的單位
    px(像素)
    設(shè)置起來是最直接的,同時(shí)也最方便的。

%(百分號(hào))
    如果line-height單位設(shè)置為%,那么將來在計(jì)算的時(shí)候,基數(shù)是當(dāng)前標(biāo)簽中的文本的字體的大小。
    如果是%,%之前的數(shù)據(jù)一定是整數(shù) :150% ,200%

em
    效果跟%是一樣一樣的。
    注意:一行em的大小相當(dāng)于是當(dāng)前標(biāo)簽中的font-size的大小。
    如果是em,em之前的數(shù)據(jù)一定是:1.2em ,1.5em ,2em

不帶單位
    如果不涉及到繼承,那么帶不帶單位(em)都是一樣的效果,但是如果涉及到繼承的話,那么就有很大的區(qū)別了:

       1、如果單位是em,那么將來在繼承的時(shí)候,我們的瀏覽器會(huì)先將行高對(duì)應(yīng)的具體的數(shù)值計(jì)算出來以后再繼承。
       2、如果沒有單位,那么將來在繼承的時(shí)候,我們的瀏覽器會(huì)先將line-height這個(gè)屬性繼承給子元素,再在子元素的font-size來計(jì)算。line-height: 1.5。

5.行高可以被繼承
我們知道,CSS的三大特性是繼承、層疊、優(yōu)先級(jí)。line-height也是可以被繼承的,如下面的示例:


復(fù)制代碼
代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
/*line-height: 20px;*/
}
</style>
</head>
<body>
<div class="father">
<div class="children">豐趣海淘</div>
</div>
</body>
</html>

在不給.father設(shè)置行高的情況下,.children的文字行高默認(rèn)為18

接著我們給div設(shè)置一個(gè)行高等于20px


復(fù)制代碼
代碼如下:

.father {
line-height: 20px;
}
 

我們?cè)賮砜纯?children標(biāo)簽的的變化,.children標(biāo)簽的文字行高變成20px了

而且,不管我們給行高設(shè)置什么單位(px、%、em、不帶單位)都可以被繼承。

6. 行高計(jì)算的基數(shù)
如果行高的單位不是px,那么將來行高要進(jìn)行計(jì)算:這個(gè)計(jì)算需要一個(gè)基數(shù),這個(gè)基數(shù)是當(dāng)前標(biāo)簽的字體大小,而不是瀏覽器默認(rèn)字體大小。以上面的例子為例,我們并沒有設(shè)置任何字體大小,此時(shí)我們把line-height設(shè)置為150%,那么文字的行高將變?yōu)?4px(16px*1.5=24)。


復(fù)制代碼
代碼如下:

div {
line-height: 150%;
}

效果如下

此時(shí)我們?cè)诮odiv設(shè)置一個(gè)font-size等于20px:


復(fù)制代碼
代碼如下:

div {
line-height: 150%;
font-size:20px;
}
 

那么文字行高將會(huì)變成30px,20px*1.5=30px;

總結(jié)
以上就是CSS行高(line-height)及文本垂直居中原理的全部內(nèi)容,希望本文的內(nèi)容對(duì)大家學(xué)習(xí)CSS能有所幫助,如果各位有什么疑問歡迎留言探討,小編會(huì)盡快給大家回復(fù)的。

相關(guān)文章

最新評(píng)論