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

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

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

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


復制代碼
代碼如下:

<!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標簽中的文字就相對于div垂直方向居中了，想要文本水平居中設(shè)置text-align：center即可。

那么，它怎么就垂直居中了？為了弄清楚它，下面我們先來看幾個概念。

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

默認情況下一行文本的行高分為：上間距，文本的高度，下間距，并且上間距是等于下間距的，所以文字默認在這一行中是垂直居中的。

2. 文本中的幾條線

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

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

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

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

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

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

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

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

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

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


復制代碼
代碼如下:

<!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的文字行高默認為18

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


復制代碼
代碼如下:

.father {
line-height: 20px;
}
 

我們再來看看.children標簽的的變化，.children標簽的文字行高變成20px了

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

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


復制代碼
代碼如下:

div {
line-height: 150%;
}

效果如下

此時我們在給div設(shè)置一個font-size等于20px：


復制代碼
代碼如下:

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

那么文字行高將會變成30px，20px*1.5=30px;

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

相關(guān)文章

最新評論