極客小俊

把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主

你不用拼過聰明人，你只需要拼過那些懶人 你就一定會(huì)超越大部分人!

字母x與css中ex單位之間的概念

上面也說過了, ?vertical-align: middle 并不是絕對(duì)的垂直居中于文字對(duì)齊! ?middle也只是一種近似接近于居中的效果!

就是因?yàn)椴煌淖煮w在行元素中的位置是不一樣的!中線位置也不一樣，所以說對(duì)齊方式也不一樣。

同時(shí)如果font-size字體大小有變化的情況下, x字母的高度也會(huì)隨之變化, 然后內(nèi)聯(lián)元素依舊會(huì)以小寫字母x的中線為基準(zhǔn)對(duì)齊 ?

舉個(gè)例子:

如果用一個(gè)小圖標(biāo)來對(duì)齊一行文字,那么在文字大小和字體樣式有變化之后,給小圖標(biāo)設(shè)置vertical-align: middle 后,它依舊會(huì)按照x中線對(duì)齊, 但這個(gè)小圖標(biāo)的從大小上感覺沒有對(duì)齊,也從外部元素的高度上來看，所以小圖標(biāo)感覺也沒有垂直居中對(duì)齊的樣子!

如下圖所示:

所以要讓一個(gè)小圖標(biāo)來對(duì)齊一行文字,還有一個(gè)更加簡(jiǎn)便的做法 那么就是使用ex單位來解決!

ex 在css中的定義是一個(gè)尺寸單位, 官方的解釋是: 一個(gè) ex 是一個(gè)字體的 x-height。(其實(shí)就是你設(shè)定的字體中產(chǎn)生的x的大小)

我的解釋 : ex 就是css中的一個(gè)相對(duì)單位, 相對(duì)的是字體大小和字體樣式而改變的一個(gè)單位! 指的就是小寫字母x的高度 其實(shí)就是x-height

也就是說把內(nèi)聯(lián)元素的高度尺寸單位設(shè)置為ex 那么就不會(huì)受到 字體樣式和字號(hào)的影響! 從該內(nèi)聯(lián)元素相對(duì)字體樣式和字號(hào)進(jìn)行變化!

1ex 就是一個(gè)x的高度這句話如何理解: ?就是在不同字體和字號(hào)情況下x的高度!

那么也就是說把小圖標(biāo)的高度設(shè)置為1ex ?那么不管你把字體大小 和 字體樣式如何修改， 這個(gè)小圖標(biāo)都會(huì)隨著他們而變化!

案例:

?<style type="text/css" >
?
? ? ?#test{
? ? ? ? ?background: yellow;
? ? ? ? ?font-size: 78px;
? ? ? ? ?font-family: serif;
? ? ?}
? ? ?#test2{
? ? ? ? ?background: yellow;
? ? ? ? ?font-size: 78px;
? ? ? ? ?font-family: 龐門正道標(biāo)題體;
? ? ?}
? ? ?#test3{
? ? ? ? ?background: yellow;
? ? ? ? ?font-size: 78px;
? ? ? ? ?font-family: 微軟雅黑;
? ? ?}
? ? ?span>img{
? ? ? ? ?/* vertical-align: middle;*/
? ? ? ? ?height: 1ex;
? ? ?}
?
?</style>
?
?<span id="test"><img src="images/test.gif"> 北京市 iphone x</span>
?<br>
?<span id="test2"><img src="images/test.gif"> 北京市 iphone x</span>
?<br>
?<span id="test3"><img src="images/test.gif"> <em>北京市 iphone x</em></span>

效果如下:

不管如何修改字體大小和字號(hào) 小圖標(biāo)都會(huì)更好的去垂直居中, ?vertical-align: middle;也沒必要使用了! 借助ex這個(gè)相對(duì)單位我們直接利用默認(rèn)的baseline基線對(duì)齊就可以實(shí)現(xiàn)小圖標(biāo)內(nèi)聯(lián)元素和文字進(jìn)行居中的效果了! ?注意:經(jīng)過審查元素看到每一行小圖標(biāo)和文字中的字母x高度始終是一樣的!

小結(jié): ex相對(duì)單位不會(huì)受字體和字號(hào)的影響! 雖然ex單位跟line-height沒有直接關(guān)系，但也有間接關(guān)系!

回顧什么是內(nèi)聯(lián)元素!

內(nèi)聯(lián)元素從定義上看: 該元素默認(rèn)的display屬性值為inline、inline-block、inline-table的元素就是內(nèi)聯(lián)元素。

內(nèi)聯(lián)元素從表現(xiàn)上看: 典型的特征就是內(nèi)聯(lián)元素可以和文字在一行進(jìn)行顯示, 這里注意: 文字本身也是一個(gè)內(nèi)聯(lián)元素(是匿名內(nèi)聯(lián)元素 馬上會(huì)接下來會(huì)說到), 所以我們常見的內(nèi)聯(lián)元素從表面上看有文字、 圖片、按鈕、輸入框、下拉框、等原生表單控件都是內(nèi)聯(lián)元素!

內(nèi)聯(lián)盒模型 (重點(diǎn)核心)

在我們學(xué)習(xí)line-height這個(gè)屬性的時(shí)候, 我們還必須要了解CSS中一個(gè)重要的概念 就是內(nèi)聯(lián)盒模型 ?那么我們先來看一段代碼案例, 這一段文字代碼看似簡(jiǎn)單 但其中包含很多術(shù)語和概念，通俗的說這一段代碼中包含很多種類的盒子!

如下:

?<p>
? ? ?這是一行普通的文字, 這里有一個(gè) <em>我是斜體</em> 標(biāo)簽
?</p>

從以上代碼中 我們來分析它里面到底有哪些盒子!

(1) 內(nèi)容區(qū)域 content area

內(nèi)容區(qū)域是一種我們?nèi)庋劭床灰姷暮凶?，它圍繞著文字 ?我們平常是看不見這個(gè)盒子的!

通俗理解: 其實(shí)可以通過選中文本然后查看背景顏色區(qū)域作為內(nèi)容區(qū)域來理解! ?

小提示:但是要注意的是 如果是圖片,其內(nèi)容不是文字,不存在內(nèi)容區(qū)域之說 因此對(duì)于圖片這類元素可以把內(nèi)容區(qū)域看作是元素自身!

也就是說如果是圖片的話,那么內(nèi)容區(qū)域的大小是隨著圖片的大小來決定的!

這樣理解內(nèi)容區(qū)域可以幫助我們理解各種相關(guān)內(nèi)聯(lián)元素的行為都是可以的!

如下圖:

內(nèi)容區(qū)域小結(jié)

1. 我們先記住一點(diǎn): 文字選中的背景顏色區(qū)域就把它看做為: 內(nèi)容區(qū)域!

2. 內(nèi)容區(qū)域 (content area) 的高度會(huì)受到font-family(字體)和font-size(字號(hào))的影響!

3. 并且有時(shí)候哪怕是當(dāng)前元素的font-size(字號(hào)大小)在不變的情況下, ?但也有可能因?yàn)?font-family(字體)設(shè)置的不同最后導(dǎo)致內(nèi)容區(qū)域 (content area)不一樣!

4. 內(nèi)容區(qū)域頂線和底線包裹的區(qū)域就是內(nèi)容區(qū)域，如果font-size 或 font-family有變化 那么頂線和底線位置也會(huì)變化。

5. 我們?cè)谠O(shè)置font-size 或者 font-family的時(shí)候,實(shí)際上都會(huì)改變內(nèi)容區(qū)域的大小! ?所以內(nèi)容區(qū)域高度與字號(hào)以及字體有關(guān)!

6. 這里還有一個(gè)重點(diǎn)就是內(nèi)容區(qū)域 是不能使用width和height進(jìn)行設(shè)置寬高的!

總的來說內(nèi)容區(qū)域：就是底線和頂線包裹的區(qū)域（行內(nèi)元素display：inline可以通過background-color屬性顯示出來），實(shí)際中不一定看得到，但確實(shí)存在。內(nèi)容區(qū)的大小依據(jù)font-size的值和字?jǐn)?shù)進(jìn)行變化。

如下圖:

(2) 內(nèi)聯(lián)盒子(行內(nèi)框) inline box

說到內(nèi)聯(lián)盒子 那么大家一定就不會(huì)陌生了 就是我們平常使用的內(nèi)聯(lián)元素(行內(nèi)元素)! ?

內(nèi)聯(lián)盒子也稱之為: 行內(nèi)框 這要特別注意 這是針對(duì)行元素而言的, 每個(gè)行內(nèi)元素會(huì)生成一個(gè)行內(nèi)框，行內(nèi)框是一個(gè)瀏覽器渲染模型中的一個(gè)概念 無法肉眼觀測(cè)!

它讓內(nèi)容成為一行排列 ?所以內(nèi)聯(lián)盒子就是指的內(nèi)聯(lián)元素, 簡(jiǎn)單的說就是文字用的什么內(nèi)聯(lián)元素來包含!

例如: span、em、a、這些都屬于 內(nèi)聯(lián)盒子(行內(nèi)框)! ?

注意:行內(nèi)框 = 內(nèi)容區(qū)域

內(nèi)聯(lián)盒子的分類

但是內(nèi)聯(lián)盒子則又會(huì)細(xì)分為 內(nèi)聯(lián)盒子 ?和 ?匿名內(nèi)聯(lián)盒子

所以 常見的內(nèi)聯(lián)盒子 如文字外部包含的是 span、a、em、strong、等這些標(biāo)簽 那么則屬于 內(nèi)聯(lián)盒子

如果 是光禿禿的文字 則屬于 匿名內(nèi)聯(lián)盒子 所以要注意 光禿禿的文字其實(shí)也是一種內(nèi)聯(lián)盒子!只是沒有標(biāo)簽名字而已!

如下圖:

特別案例

我們?cè)谠O(shè)定line-height行高時(shí),行內(nèi)框(也就是內(nèi)聯(lián)盒子)的高度是不會(huì)有任何變化的，不知道大家有沒有注意到這個(gè)情況!

如下案例:

?<div>
? ? ?<span style="">重慶市</span>
? ? ?<em>北京市</em>
? ? ?<strong style="line-height: 30px;">深圳市</strong>
?</div>

如圖: 我給strong設(shè)定了line-height為30px 但strong的高度依舊是19.8 ?其他兩個(gè)內(nèi)聯(lián)盒子也是一樣的高度 并沒有影響，

影響的是strong上下周圍的區(qū)域 也就是分別增加/減少到內(nèi)容區(qū)域的上下兩邊灰色的部分! ?并且上下的灰色部分的高度是一致的!

這也就是我們待會(huì)要講解到的行框與行間距(行距)、(半行距)的概念

(3) 行框盒子 line box

每一行就是一個(gè)行框盒子，那什么又叫做每一行呢 ？由多個(gè)內(nèi)聯(lián)盒子組合而成的一行 就會(huì)形成一個(gè)行框盒子

所以反推每一個(gè)行框盒子又是由一個(gè)個(gè)內(nèi)聯(lián)盒子組成而來的! ?

注意: 是每一行都會(huì)形成，如果文字有五行，就會(huì)形成5個(gè)行框。

如下圖:

綠色框部分就是由一個(gè)一個(gè)的內(nèi)聯(lián)盒子組成的 最終這一個(gè)整體就叫做一個(gè) 行框 或者叫 行框盒子

小提示: 如果有換行符 把字符和元素?fù)Q到下一行那么 下一行就是一個(gè)新的行框! 就相當(dāng)于有多行內(nèi)容時(shí)，每行都會(huì)有自己的行框

注意: 并且 行框高度等于本行框內(nèi)部,所有行內(nèi)框(內(nèi)聯(lián)盒子)中,最大的那個(gè)行內(nèi)框(內(nèi)聯(lián)盒子)的值! ?重點(diǎn): 是以帶有行高值最大的行內(nèi)框(內(nèi)聯(lián)元素)為基準(zhǔn)來最終計(jì)算行框的高度，其他行內(nèi)框(內(nèi)聯(lián)元素)采用自己的對(duì)齊方式向基準(zhǔn)對(duì)齊!

簡(jiǎn)單的說 就是 行間距 + 字體大小 = Line-height的高度 ?就是這個(gè)高度撐開了行框! ? ? (行間距包含在行框內(nèi)部的!) ?為了方便理解請(qǐng)看下圖:

從上圖可以看出來 所有的內(nèi)聯(lián)元素都是以基線對(duì)齊的上面已經(jīng)說過了，但重要的是 第二個(gè)內(nèi)聯(lián)元素具有行高, 產(chǎn)生了行間距 所以就以第二個(gè)內(nèi)聯(lián)元素為基準(zhǔn)來計(jì)算行框最終的高度!

備注: 設(shè)置line-height屬性會(huì)影響行框的布局? 這句話的意義何在？

答案就是: ?line-height 與 font-size 的計(jì)算值之差(行距)分為兩半，分別加到一個(gè)內(nèi)聯(lián)元素的頂部和底部 而且計(jì)算出來的差值分別加到內(nèi)容區(qū)域的頂部和底部的就是行距 ? 所以實(shí)質(zhì)上撐開 行框 的是line-height行高其中的行距!

(4) 包含盒子 containing box

這段代碼中的p標(biāo)簽就是一個(gè)包含盒子! ?包含盒子的內(nèi)部就是由一行一行的行框盒子組成!

一個(gè)行框盒子 說明只有一行, 多個(gè)行框盒子說明是多行! ?當(dāng)然也有人稱呼它為 包含塊(containing block)

如下圖:

粉紅色部分的就是包含塊部分! ?包含塊最終把這一行整合為一個(gè)整體!

(5) 幽靈空白節(jié)點(diǎn)

這個(gè)概念聽起來就很玄乎! 很奇特 ?但其實(shí)也是在內(nèi)聯(lián)盒模型中一個(gè)很重要的概念!

概念理解: 在瀏覽器對(duì)內(nèi)聯(lián)元素的解析和渲染中 每一個(gè)行框 前面都有一個(gè) ?空白節(jié)點(diǎn) ?但很奇特的是這個(gè)空白節(jié)點(diǎn)永遠(yuǎn)是看不見透明的 并且也不占據(jù)任何寬度 也就是說 寬度為0, 是的 肉眼看不見 也無法通過腳本去獲取到 ?就好比幽靈一般! 但又的的確確是存在的! 就跟文本節(jié)點(diǎn)一樣 所以 大家都稱為它是 ?幽靈空白節(jié)點(diǎn)

注意: 有一個(gè)前提條件 它主要是在HTML5的文檔聲明中才有這個(gè)情況，其他老一點(diǎn)的文檔聲明則不存在 幽靈空白節(jié)點(diǎn)!

我們來看一個(gè)案例 就會(huì)馬上了解 如下:

?<style type="text/css" >
? ? ?div{
? ? ? ? ?background: #cd0000;
? ? ?}
? ? ?span{
? ? ? ? ?display: inline-block;
? ? ?}
?</style>
?
?<div><span></span></div>

注意: 這里我們并沒有設(shè)置任何高度! 而結(jié)果卻是如下圖所示:

此時(shí)你看見結(jié)果后一定會(huì)很驚訝 為什么div的高度不是0呢？ ?我們并沒有給div設(shè)置任何高度呀 對(duì)吧 ?并且內(nèi)部span的高度我們也沒有設(shè)置呀 高度也應(yīng)該是0 ?那么div的高度20px是如何來的呢? ?這就是我們剛剛說的 幽靈空白節(jié)點(diǎn) 的緣故 ?

其實(shí)原因就是 : 瀏覽器對(duì)內(nèi)聯(lián)元素的解析和渲染中 每一個(gè)行框 前面都有一個(gè) ?空白節(jié)點(diǎn) ?那么這里就是在span元素的前面還有一個(gè)寬度為0的空白字符!

并且其實(shí)它也是一個(gè)盒子 ?不過是一個(gè)抽象的盒子 官方定義名稱為: strut (支柱) ?重點(diǎn)來了, 并且這個(gè)空白字符strut(支柱) ?是一個(gè)存在于每個(gè)行框盒子 內(nèi)部的最前面 ?它的寬度只有0px,看不到的, 同時(shí)這個(gè) strut (支柱)的行高和字體大小都與該元素相同! ?簡(jiǎn)單的先知道這個(gè)概念就可以了 至于高度從何而來我們后面再細(xì)說!

圖解如下:

CSS官方對(duì)strut (支柱) 的介紹: [了解]

Each line box starts with a zero-width inline box with the element's font an d line-height properties. We call that imaginary box a "strut"!

我們來看一個(gè)跟幽靈空白節(jié)點(diǎn)有關(guān)的案例:

?<style>
? ? ?.box{
? ? ? ? ?line-height: 256px;
? ? ? ? ?background: yellow;
? ? ?}
?
?</style>
?
?<div class="box">
? ? ?<img src="images/test.gif">
?</div>

效果:

此時(shí) div的高會(huì)成為256px, 有人會(huì)認(rèn)為這是把圖片的高度改變了，其實(shí)不是 ?而是line-height把 幽靈空白節(jié)點(diǎn)上下的行距增大從而改變了 ?因?yàn)閳D片是內(nèi)聯(lián)元素 ?會(huì)形成一個(gè) 行框盒子 ?在HTML5文檔模式下, 每一個(gè)行框盒子前面都有一個(gè)寬度為0的 幽靈空白節(jié)點(diǎn) 前面也提到過了 ?這個(gè)幽靈空白節(jié)點(diǎn)的特性和普通字符一模一樣也就是它是一個(gè)隱藏的內(nèi)聯(lián)元素 所以其實(shí)是這個(gè)幽靈空白節(jié)點(diǎn)被設(shè)置了上下行距為122像素的緣故 撐開了行框 ，而行框最后撐開了外面的div元素!

了解幽靈空白節(jié)點(diǎn)為后續(xù)更好的認(rèn)識(shí)內(nèi)聯(lián)元素打好堅(jiān)實(shí)的基礎(chǔ)!

line-height與內(nèi)聯(lián)元素高度之間的關(guān)系

先提出一個(gè)問題: 不管是內(nèi)聯(lián)元素 還是 塊元素 在他們沒有設(shè)置高度并且里面也有文字內(nèi)容的情況下 元素的高度從何而來?

很多人認(rèn)為是由文字撐開! 實(shí)際上卻不是， 而是line-height的高度決定的! ? ?

案例1:

通過測(cè)試我們可以看出 .test1 元素雖然設(shè)置了font-size為36px ?但line-height設(shè)置為0后 .test1元素顯示成了一根線! 并沒有像有些人所說的文字會(huì)撐開! ? 而.test2雖然font-size設(shè)為了0 文字看不見了，但line-height設(shè)為了36px ?它卻把 .test2元素?fù)伍_了! ? 原理跟上面所講到的 幽靈空白節(jié)點(diǎn) 一致! (個(gè)人理解)

案例2

?<style>
? ? ?span,em{
? ? ? ? ? ?background-color: red;
? ? ? ? ? ?line-height: 100px;
? ? ? ? ? ?/*font-size: 100px;*/
? ? ? ? ? ?border: 1px solid blue;
? ? ? ?}
?</style>
?
?<div>
? ? ?<span>北京市</span>
? ? ?<span>北京市</span>
? ? ?<span>北京市</span>
? ? ?<span>北京市</span>
?</div>
?
?<div>
? ? ?<em>北京市</em>
? ? ?<em>北京市</em>
? ? ?<em>北京市</em>
? ? ?<em>北京市</em>
?</div>

效果如下:

從上圖看 ?通過給內(nèi)聯(lián)元素span、em設(shè)置line-height , 他們的可視高度沒有變，但他們的彼此撐開了外部包含的div ?那么是什么撐開的呢? ?

答案是: line-height撐開了行框盒子 然后這個(gè)行框盒子從我們?nèi)庋凵峡词强床灰姷? 但它又可以撐開外部的div 所以就看到現(xiàn)在兩行文字彼此之間有距離了!

所以從圖中看, 內(nèi)聯(lián)元素設(shè)置line-height但內(nèi)聯(lián)元素本身高度是沒有變化,但每一行的行框的高度改變了, 從人的視覺上是看不出來的! 而撐開的這個(gè)高其實(shí)就叫 ?行距

大家的支持就是我堅(jiān)持下去的動(dòng)力!