欧美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)論