資訊專欄INFORMATION COLUMN
摘要：默認(rèn)情況下一行文本的行高分為上間距，文本的高度，下間距，并且上間距是等于下間距的，所以文字默認(rèn)在這一行中是垂直居中的。
在CSS中，line-height 屬性設(shè)置兩段段文本之間的距離，也就是行高，如果我們把一段文本的line-height設(shè)置為父容器的高度就可以實(shí)現(xiàn)文本垂直居中了，比如下面的例子：
Document
文本垂直居中原理
這樣，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ū)別了：
如果單位是em，那么將來在繼承的時(shí)候，我們的瀏覽器會(huì)先將行高對(duì)應(yīng)的具體的數(shù)值計(jì)算出來以后再繼承。
如果沒有單位，那么將來在繼承的時(shí)候，我們的瀏覽器會(huì)先將line-height這個(gè)屬性繼承給子元素，再在子元素的font-size來計(jì)算。line-height: 1.5;
5. 行高可以被繼承我們知道，CSS的三大特性是繼承、層疊、優(yōu)先級(jí)。line-height也是可以被繼承的，如下面的示例：
Document
中國(guó)人
在不給div設(shè)置行高的情況下，span標(biāo)簽的文字行高默認(rèn)為18
接著我們給div設(shè)置一個(gè)行高等于20px
div {
line-height: 20px;
}
span {
display: inline-block;
}
我們?cè)賮砜纯磗pan標(biāo)簽的的變化
而且，不管我們給行高設(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）。
div {
line-height: 150%;
}
效果如下
此時(shí)我們?cè)诮odiv設(shè)置一個(gè)font-size等于20px：
div {
line-height: 150%;
font-size:20px;
}
那么文字行高將會(huì)變成30px，20px*1.5=30px;
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115232.html
摘要：上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護(hù)與破壞寫在前面在頁面布局中，內(nèi)聯(lián)元素的垂直對(duì)齊是比較常見和基礎(chǔ)的布局需求，但是我們往往會(huì)因?yàn)榇怪睂?duì)齊中的，而頭疼不已。 上一篇：《CSS世界》筆記二：盒模型四大家族下一篇：《CSS世界》筆記四：流的保護(hù)與破壞 寫在前面 在頁面布局中，內(nèi)聯(lián)元素的垂直對(duì)齊是比較常見和基礎(chǔ)的布局需求，但是我們往往會(huì)因?yàn)榇怪睂?duì)齊中的1px，2px而頭疼不已...
摘要：英語為了防止用戶電腦里面，沒有微軟雅黑這個(gè)字體。因?yàn)榻^對(duì)定位脫離標(biāo)準(zhǔn)流，影響頁面的布局。一丶浮動(dòng)的補(bǔ)充 浮動(dòng)的特性: 1.浮動(dòng)的元素脫標(biāo) 2.浮動(dòng)的元素互相貼靠 3.浮動(dòng)的元素有字圍效果 4.浮動(dòng)的元素有收縮的效果 前提是標(biāo)準(zhǔn)文檔流,margin的垂直方向會(huì)出現(xiàn)塌陷問題 如果盒子居中:margin: 0auto;如果盒子浮動(dòng)了,margin...
摘要：定寬塊狀元素滿足定寬和塊狀兩個(gè)條件的元素是可以通過設(shè)置左右值為來實(shí)現(xiàn)居中的。設(shè)置方法改變塊級(jí)元素的為類型設(shè)置為行內(nèi)元素顯示，然后使用來實(shí)現(xiàn)居中效果。 做前端這一年多來，其實(shí)一直都是偏向于js前后端，css什么的總是抱著夠用就好的心態(tài)，從來沒有系統(tǒng)的學(xué)習(xí)或總結(jié)過，結(jié)果現(xiàn)在的水平也一直停留在夠用的階段。感覺作為一名合格的前端工程師，不能讓css成為自己的短板，于是簡(jiǎn)單的總結(jié)一下，高手繞路。...
摘要：的應(yīng)用大部分時(shí)候，我們?cè)O(shè)置，都是為了垂直居中對(duì)齊。然后我們給設(shè)置，這樣我們就可以重置設(shè)置的，又因?yàn)楸３至藘?nèi)聯(lián)特性，因此我們可以設(shè)置以及產(chǎn)生，從而實(shí)現(xiàn)近似垂直居中對(duì)齊。 前言 行高，顧名思義是一行文字的高度，而從規(guī)范上來說則是兩行文字基線之間的距離。行高是作用在每一個(gè)行框盒子(line-box)上的，而行框盒子則是由內(nèi)聯(lián)盒子組成，因此，行高與內(nèi)聯(lián)元素可以說是非常緊密，行高直接決定了內(nèi)聯(lián)元...
摘要：下的屬性值詳解以下內(nèi)容均在中測(cè)試默認(rèn)對(duì)齊方式這里作為參考系，而它的就是所要對(duì)齊的了。沒有任何變化。那改變又如何呢為了讓的清晰可見，特意添加一個(gè)的包裹著。 前言 一直聽說line-height是指兩行文本的基線間的距離，然后又說行高等于行距，最近還聽說有個(gè)叫行間距的家伙，@張?chǎng)涡襁€說line-height和vertical-align基情四射，貴圈真亂啊。。。。。。于是通過本篇來一探究竟...
閱讀 1356·2021-11-24 09:38
閱讀 3291·2021-11-22 12:03
閱讀 4265·2021-11-11 10:59
閱讀 2372·2021-09-28 09:36
閱讀 1064·2021-09-09 09:32
閱讀 3488·2021-08-05 10:00
閱讀 2573·2021-07-23 15:30
閱讀 3020·2019-08-30 13:12
