01|字母x CSS世界中隱匿的舉足輕重的角色
因為涉及到排班或者說對齊的,其實都是離不開一個基本的概念:baseline(基線)
line-height行高的定義就是兩基線的間距,vertical-align的默認值也是基線(字母x的下邊緣)!
01|字母X與CSS中的x-height
其中x-height是CSS中的一個概念,表示小寫字母x的高度,其術語的意思表示為 baseline和midline之間的距離!
其中在所謂的排版中還有另外一些概念,如下所示:
- ascender height 上行線高度
- cap height 大寫字母高度
- median 中線
- descender 下行線高度
其中CSS中有些概念和這個所謂的x-height還是有關系的! 典型的代表就是 vertical-align:middle;
middle表示中間的意思,其實和上面介紹的median是沒有關系的, middle表示的是 基線往上1/2 x-height的高度
我們的話可以立即為x交叉點的位置!
但是微軟雅黑相較于別的字體來看是字符下沉比較厲害的字體,一年春vertical-align:middle; 不是相對容器中分線對齊的了!
其實這又說到了 因為CSS世界中的主題是文字,內(nèi)容元素對齊是相對于文字對齊的,而并非外部的塊級容器!
02|字母x與CSS中的ex
ex其實就是IE6都老早支持的ex單位,其實也是一個CSS中的一個相對單位,指的就是小寫x的高度! 也就是所謂的 x-height!
其實所謂的em,px還是受字體等CSS屬性影響較大! 由于字母x受字體影響比較大,不穩(wěn)定,因此ex也不適合來限定元素的尺寸!
但是他的應用場景體現(xiàn)在 不受字體和字號影響的內(nèi)聯(lián)元素垂直居中對齊!
我們設置垂直居中的時候 就可以借助這個ex來進行垂直居中!
預覽請見:https://demo.cssworld.cn/5/1-1.php
因為不管字體怎么變換 內(nèi)聯(lián)元素都是按照文字基線對齊的,
02|內(nèi)聯(lián)元素的基石line-height
div高度是由行高決定的并非文字,通過p114中的案例就可以很好地說明了!
并對于純非替換元素的內(nèi)聯(lián)元素,可視高度完全有l(wèi)ine-height決定!
那么如果說替換元素或者說是塊級元素那么對應的line-height其中有扮演著什么角色呢?
其中就需要很好的理解所謂的 行距和半行距 的概念了!
當前文字的上方和下方的間距都是半間距! 半間距僅僅是行距高度的一半!
其實所謂的 行距=行高-字體盒子 || 行距=(line-height)-(font-size)
01|為什么line-height可以讓內(nèi)聯(lián)元素"垂直居中"
我們一般流傳著 高度和行高一致 可以讓單行文字垂直居中!
其實這種說法不嚴謹,誤區(qū)二,其實行高控制不僅僅適用于單行,其實多行也是可以的!
詳情見p119
那么為什么說垂直居中說法不嚴謹呢? 其實詳細通過測量會發(fā)現(xiàn) 還是會發(fā)現(xiàn)細微差別的! 其實和line-height無關,而是與vertical-align相關的!
02|line-height的好朋友vertical-align
為什么說line-height的好朋友是vertical-align呢? 因為凡事line-height起作用的地方vertical-align也一定的起了作用,但是大部分默默地起了作用 只是我們不知道而已!
其實可以通過一個小的案例體現(xiàn)出來:
<style>
.box{line-height:32px;}
.box > span{font-size:24px;}
</style>
<div class="box">
<span>文字</span>
</div>
通過這段代碼,看看具體的行高為多少?
可能有些人看到了會認為是32px,其實沒有設定height屬性,所以高度就有l(wèi)ine-height來確定,因此這里明擺著的高度就是為32px,其實事實卻不是如此,其實實際上要比32px要大上幾像素!(和對應的字體相關 )
實際的效果通過鼠標選中 發(fā)現(xiàn)對應的高度不為line-height的高度32px!
其實所謂的box的高度不等于line-height,之所以對應的行高不等于對應的32px就是因為line-height的"朋友"搞的鬼!
03|vertical-align家族基本認識
拋開對應的inherit這類全局屬性不談的話,可以將對應的vertical-align的屬性值分為4類:
- 線類: baseline top middle bottom
- 文本類: text-top text-bottom
- 上標下標類: sub,super
- 數(shù)值百分比類: 20px 2em 20%
其實所謂的數(shù)值百分比 其實應該分為 數(shù)值類 和對應的 百分比類 因為他們之間有不同的共性
具有相同的渲染規(guī)則 根據(jù)計算值的不同 相對于基線往上或者是往下偏移!
并且默認的對齊方式 是按照基線對齊,因此如果如果說對應的vertical-align的值為正數(shù)的話 那么則向上偏移 如果為負數(shù)的話 則向下偏移 也就可以驗證對應的baseline其實是對應著vertical-align的默認值為0!
對應的vertical-align:middle也不是百分之百的垂直居中的,其實還是有些差別的 并且對應的差別也是由于這個字體和字號所決定的!
并且在CSS世界中,凡是百分比的值均是需要一個相對計算的值的,比如說margin和padding的話 是相對于寬度計算的,line-height是相對于font-size計算的,而這里的vertical-align屬性的百分比值則是相對于line-height的計算值計算的!
01|vertical align作用的前提
其實vertical align作用的前提就是:只能夠應用于內(nèi)聯(lián)元素以及display值為table-cell的元素!
也就是說了 只能作用于 inline,inline-block,inline-table或者說table-cell的元素上面!
當然有些屬性設置會改變元素的display的值的! 就比如說 浮動或者說絕對定位 會導致元素變成塊級元素!
有人說table-cell會無視行高,其實并不是這樣的,而是對應的vertical-align起作用的是table-cell元素自身!
02|vertical-align和line-height之間的關系
其實vertical-align和line-height之間的關系比較明確,就是"朋友關系",因為最明顯的就是vertical-align計算的,但是表面所見的這點關系實際上只是冰山一角!
之前介紹到的設定了行高和對應的字號大小,之后的話呢,高度是否等于對應的行高,最后的結果卻不是我們所設定的行高!
其主要原因是因為字號的印象,因為文字全部是按照基線對齊,因此當兩個字號不同的蚊子在一起的時候,彼此會發(fā)生上下位移,如果位移距離足夠大的話,就會超過行高的限制!
其實間隙產(chǎn)生的三大元兇便是:
- 幽靈空白節(jié)點
- line-height
- vertical-align
為了更好地理解,我們將在幽靈節(jié)點的位置放置字母x替代 幽靈空白節(jié)點!
如何更好地解決這個問題:
- 圖片塊狀化
- 容器的line-height足夠小
- 容器的font-size足夠小
- 圖片設置vertical-align屬性值!
03|深入理解vertical-align線性類屬性值
inline-block與baseline,vertical-align的屬性的默認值baseline在文本之類的內(nèi)聯(lián)元素那里就是字符x的下邊緣,對于替換元素則是替換元素的下邊緣但是如果說是inlineblock元素的話規(guī)則則要復雜一些了:
一個inline-block元素如果說里面沒有內(nèi)聯(lián)元素的話,或者overflow不是visible則該元素的基線就是其margin底邊緣;否則其基線里面最后一行內(nèi)聯(lián)元素的基線!
這里的話,分享一下總結的一套基于20px圖標對齊的處理技巧,該技巧有以下3個要點:
圖標高度和當前行高都為20px 將圖標原先拓展成統(tǒng)一規(guī)格! 可以節(jié)約大量CSS以及對每一個圖標對其進行不同處理的開發(fā)版本
圖標標簽里面永遠有字符 這個可以借助對應的:before和:after偽元素生成一個空格字符串輕松搞定!
圖標CSS不使用overflow:hidden保證肌纖維里面字符的基線,但是要讓里面潛在的字符不可見!
04|了解vertical-align:top/bottom
基本表現(xiàn)類似,只是一個"上"一個"下"因此和在一起講
定義具體如下:
- 元素底部或者說當前行框盒子的頂部對齊
- table-cell 元素底部padding邊緣和表格行的頂部對齊
如果是內(nèi)聯(lián)元素,則和這一行高度最高的內(nèi)聯(lián)元素的頂部對齊
如果說display計算值是table-cell的元素的話,我們不妨腦補成"<td>" 元素 則和'<tr>'元素上邊緣對齊!
其實bottom的話,和top正好相反!
并且需要注意的是,內(nèi)聯(lián)元素的上下邊緣對齊的這個"邊緣"是當前"行框盒子"的上下邊緣,并不是塊狀容器的上下邊緣!
其實在該屬性中的top和bottom值可以說是最容易理解的了vertical-align屬性值了,并且對應的表現(xiàn)也相當?shù)姆€(wěn)定! 不會出現(xiàn)難以理解的現(xiàn)象! 常常在實際開發(fā)的過程中用到!
05|vertical-align:middle與近似垂直居中
其實在我們?nèi)粘ｉ_發(fā)中的line-height和對應的vertical-align所實現(xiàn)的垂直居中,其實都是"近似垂直居中"! 原因與vertical-align:middle的定義相關!
- 內(nèi)聯(lián)元素:元素的垂直中心點和行框盒子基線往上1/2 x-height處對齊
- table-cell元素:單元格填充盒子相對于外面的表格行居中對齊!
基本上所有的字體當中,字符x的位置都是偏下一點兒的,并且是字號越大偏移越明顯!
因此導致的vertical-align:middle實現(xiàn)的都是"近似垂直居中!"
其實如果說要實現(xiàn)真正意義上的垂直居中的話,那么需要將X的位置在容器垂直方向的正中間即可!
通常的做法是通過font-size:0;根據(jù)line-height的半行間距上下等分原則,其實這個點就在整個容器的垂直中心位置!
但是我們在日常開發(fā)的過程中會發(fā)現(xiàn),font-size的值可能在12px和在14px之間的! 雖然說效果是 "近似垂直居中"但是還是比較難察覺出其中細微的差距的! 因此是否需要實現(xiàn)真正意義上的垂直居中,還需要不斷的權衡!
06|深入理解vertical-align文本類屬性值
其實文本類屬性值就是text-top和text-bottom,其中具體的定義如下:
vertical-align:text-top;盒子頂部與父級內(nèi)容區(qū)域頂部對齊!
vertical-align:text-bottom;盒子的底部與父級內(nèi)容區(qū)域底部對齊!
簡單介紹所謂的內(nèi)容區(qū)域:FireFox/IE瀏覽器文本選中的背景區(qū)域,默認狀態(tài)下的內(nèi)聯(lián)文本的背景色區(qū)域!
對應的"父級內(nèi)容區(qū)域"其實也就是父級元素當前font-size和font-family下應有的內(nèi)容區(qū)域的大小!
定義可以理解為假設元素后面有一個和父元素font-size,font-family一模一樣的文字內(nèi)容,則vertical-align:text-top;標識元素和這個文字的內(nèi)容區(qū)域的上邊緣對齊!
其實講到這里可以通過預覽發(fā)現(xiàn)其中的表現(xiàn)在哪里?
預覽請見:https://demo.cssworld.cn/5/3-9.php
看到了對應的區(qū)別之后呢,來講講以下幾個明顯的優(yōu)勢:
- 文本類屬性值的垂直對齊與左右文字大小和高度都沒有關系,線性類屬性的定位都會受到兄弟內(nèi)聯(lián)元素的影響!
- 文本類屬性值的垂直對齊可以像素級精確控制,如果是線性雷屬性值中的基線和對應的line-height都是無法精確控制垂直居中對齊的! 圖文對齊可以控制父元素的font-size 如果是文字對齊可以改變文字的line-height 精確控制對其位置!
其實也從側面說明了問題,就是CSS設計之初的初衷可能非常的簡單,但是結果呢可能卻滿天飛! 有些屬性值應該有大成,實際卻無人問津! (vertical-align中的文本類屬性的屬性值就是之一!)
其中主要的原因如下:
- 使用場景缺乏 當前的CSS重構主要以"精致布局"為主,對齊文本的場景相比舊時代要少很多!
- 文本類垂直對齊理解成本高 一般人可能會用margin定位或者說relative,資深一點可能會用vertical-align數(shù)值的方式進行調(diào)整,但是呢對應的文本類屬性值卻很少用,"難以理解" 不方便!
- 內(nèi)容區(qū)域不直觀并且內(nèi)容區(qū)域的"易變" 現(xiàn)在實際上對外的項目都要求 精確布局并且像素級還原, 但是內(nèi)容區(qū)域本身默認是看不見的, 并且 內(nèi)容區(qū)域大小是默認和字體font-family相關的,如果說在不同的平臺上面運行的話,現(xiàn)實是不同的,內(nèi)容區(qū)域的不同會導致布局對齊的位置也不同,產(chǎn)生了對應的“不兼容”，如果說對視覺要求較高的話,該問題就比較嚴重了!
這樣一來 文本類屬性在理論上面強大,但是如果說應用到實際層面開發(fā)中的話使用價值卻非常有限!
07|簡單了解vertical-align上標下標類屬性值
在vertical-align下標類屬性值指的就是sub和super兩個值!對應的就是下上標!
在HTML中有<sub>和<sup>兩種標簽,語義上其實和我們的sub和super其實是一致的!也是上下標的關系!
其實他們兩對不一般啊,sup標簽默認的vertical-align屬性值是vertical-align就是super,sub對應的也就是sub!
ProbeDream<sup>123</sup> //其實就是 ProbeDream123 其中的123在ProbeDream右上角!
ProbeDream<sub>456</sub> //其實也就是ProbeDream456 其中的456在ProbeDream左下角!
基本上所謂的vertical-align上下標屬性值的實際應用價值也就只有這么點了! 通過下面的定義就知道了:
- vertical-align:super; 提高盒子的基線到父級合適的上標基線位置!
- vertical-align:sub; 提高盒子的基線到父級合適的下標基線位置!
其中在定義中的合適的意思就顯得有點模棱兩可了,就非常讓人蠻茫然!與此同時,我們還要注意,vertical-align上下標屬性值并不會改變對應元素的文字大小,更不要被 sub和sup標簽給誤導了! 因為這兩個HTML標簽的默認的font-size為smaller!
- 無處不在的vertical-align
算是對之前內(nèi)容的一個必要的總結,對于內(nèi)聯(lián)元素,有一個"幽靈空白節(jié)點"和"無處不在的vertical-align屬性"
雖然說同屬性線性雷屬性值,但是top/bottom和baseline/middle卻是完全不同的兩個幫派,前者是看邊緣和看盒子,但是后者是和字符x打交道!
并且與此同時還需要了解內(nèi)聯(lián)盒模型,不同屬性值定義完全不同,且很多屬性table-cell元素有著不同的定義,同時最終表現(xiàn)與字符x,line-height,font-size,font-family屬性密切相關! 需要對這些屬性有比較深入的了解!
在本文中示例的展示都是單屬性值和默認值baseline如何作用的,但是實際開發(fā)的時候會經(jīng)常出現(xiàn)兩個內(nèi)聯(lián)元素同時設置baseline意外屬性值的情況,但是實際上, vertical-align個類屬性值并不會存在互相沖突的情況!但是某個vertical-align的屬性值確實會影響某個元素的表現(xiàn),但是并不是直接的,因此我們在分析復雜場景的時候,僅需要套用定義分析當前的vertical-align值的作用就行了!
基于vertical-align屬性的水平垂直居中的彈框!
預覽請見:https://demo.cssworld.cn/5/3-10.php
其中相較于傳統(tǒng)的JavaScript精確計算彈框的位置,有以下優(yōu)點:
1.節(jié)省了很多無謂的JavaScript代碼,并且不需要瀏覽器進行熱size事件之類的處理,彈框內(nèi)容動態(tài)變化的時候,無需重新定位!
2.性能更快,喧嚷速度更快,瀏覽器內(nèi)置CSS的即時渲染器比JavaScript處理的更好!
3.可以非常靈活控制垂直居中的比例
4.容器設置了overflow:auto可以實現(xiàn)彈框高度超過一屏是依然能夠看見屏幕外的內(nèi)容,傳統(tǒng)實現(xiàn)方法則比較尷尬!
