摘要:左起第一個(gè)矩形內(nèi)部有文字,屬于內(nèi)聯(lián)元素,那么第一個(gè)的基線為內(nèi)部的基線,第二個(gè)的內(nèi)部無(wú)內(nèi)聯(lián)元素,那么它的基線就是的底端,第三個(gè)內(nèi)部有內(nèi)聯(lián)元素,但是他的屬性為,不是,所以它的基線還是的底端。
看似三個(gè)最常見(jiàn)的概念背后卻隱藏了很深的很深“水”
那有多深呢,先來(lái)看下面的代碼
x
x x xjq
好,同學(xué)們把這四段代碼放到編輯器里面然后打開(kāi)瀏覽器,如果對(duì)于你眼前的畫(huà)面沒(méi)有感到疑惑,那么其實(shí)你就無(wú)需向下看了
On a block container element whose content is composed of inline-level elements, ‘line-height’ specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element’s font and line height properties. We call that imaginary box a “strut.” (The name is inspired by TeX.).
翻譯成國(guó)語(yǔ):
在一個(gè)由行內(nèi)元素組成的塊級(jí)元素中,line-height指定了這個(gè)元素中的所有l(wèi)ine box的最小高度。這個(gè)最小高度包括在baseline上面的最小高度和baseline下面的最小深度,就好像每個(gè)line box是由一個(gè)0寬度的,有著元素的font和line-height屬性的行內(nèi)框開(kāi)始的,我們稱這個(gè)虛擬的盒子為strut
關(guān)于baseline和line box的概念請(qǐng)參考張?chǎng)涡翊蟠蟮奈恼拢?br>http://www.zhangxinxu.com/wor...
看著很亂是吧,上圖來(lái)看:
分析原因這是前兩段代碼的示意圖,對(duì)比兩張圖發(fā)現(xiàn)span沒(méi)有寬高的情況下,baseline上下分別有隱形高度;設(shè)置寬高之后,下面的strut仍然存在,再來(lái)看第三段代碼的示意圖
圖中藍(lán)色區(qū)域?yàn)樾袃?nèi)框的高度,紅線即字母x的baseline,strut的高度正好是紅線到底邊框的高度,也就是說(shuō)默認(rèn)垂直對(duì)齊方式是baseline;掃了一眼MDN關(guān)于vertical-align的文檔,默認(rèn)值果然是baseline,印證了這一說(shuō)法。
看最后一段代碼示意圖:
wtf,這又是幾個(gè)意思??baseline怎么又和底邊框接上了??
The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.
再來(lái)翻譯成國(guó)語(yǔ):
對(duì)于一個(gè) inline-block 元素,如果它內(nèi)部沒(méi)有內(nèi)聯(lián)元素,或者它的overflow屬性不是visible,那么它的baseline就是元素margin的底端。否則,就是它內(nèi)部最后一個(gè)元素的基線。
好了,圖中三個(gè)框可以很好地理解這段話:
最前面的x是用來(lái)確定這個(gè)代碼中最外層的div的基線。左起第一個(gè)矩形內(nèi)部有文字,屬于內(nèi)聯(lián)元素,那么第一個(gè)inline-block的基線為內(nèi)部x的基線,第二個(gè)inline-block的內(nèi)部無(wú)內(nèi)聯(lián)元素,那么它的基線就是margin的底端,第三個(gè)inline-block內(nèi)部有內(nèi)聯(lián)元素,但是他的overflow屬性為hidden,不是visible,所以它的基線還是margin的底端。
解決方案font-size: 0 或者 line-height: 0
vertical-align !== baseline
方法1和方法2是兩個(gè)不同的實(shí)現(xiàn)思路,方法1是讓strut那個(gè)東西消失;方法2說(shuō)起來(lái)就有點(diǎn)多了,簡(jiǎn)單理解就是inline-block垂直方向設(shè)置非baseline,從而讓strut沒(méi)有頂?shù)降撞浚簿筒粫?huì)有空白出現(xiàn)了
感覺(jué)自己寫(xiě)的很亂,有耐心看完的同學(xué)真是謝謝你們了~~
還是張?chǎng)涡翊蟠髮?xiě)得好寫(xiě)的全
http://www.zhangxinxu.com/wor...
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/50104.html
摘要:左起第一個(gè)矩形內(nèi)部有文字,屬于內(nèi)聯(lián)元素,那么第一個(gè)的基線為內(nèi)部的基線,第二個(gè)的內(nèi)部無(wú)內(nèi)聯(lián)元素,那么它的基線就是的底端,第三個(gè)內(nèi)部有內(nèi)聯(lián)元素,但是他的屬性為,不是,所以它的基線還是的底端。 看似三個(gè)最常見(jiàn)的概念背后卻隱藏了很深的很深水 那有多深呢,先來(lái)看下面的代碼 引出問(wèn)題 .inline-block { display: inline-block; } ...
摘要:上例中,左邊盒子的基線為其底邊緣,右邊盒子的基線為的基線將右邊盒子的行高設(shè)置為,即這個(gè)的高度為,位置處于中間。 vertical-align的值 線類(lèi):baseline(默認(rèn)), top, bottom, middle 文字類(lèi):text-top, text-bottom 上標(biāo)下標(biāo)類(lèi):sub, super 數(shù)值:1px, 1em - 在baseline對(duì)齊的基礎(chǔ)上上下偏移一定數(shù)值 百分...
摘要:因?yàn)榛€的不同,這就會(huì)導(dǎo)致內(nèi)聯(lián)元素在默認(rèn)使用定位時(shí),會(huì)出現(xiàn)同一行元素的錯(cuò)位問(wèn)題。那么有沒(méi)有和基線一樣的確定準(zhǔn)則呢當(dāng)然有,一個(gè)業(yè)界公認(rèn)的標(biāo)準(zhǔn)就是同一行內(nèi)聯(lián)元素中,中線穿過(guò)的是小寫(xiě)的中點(diǎn)。 暑假前因?yàn)榉N種原因沒(méi)有把百度IFE的先期課程學(xué)完,這個(gè)暑假又參加了相關(guān)項(xiàng)目開(kāi)發(fā),邊做邊學(xué)也總結(jié)了一些教訓(xùn)。現(xiàn)在打算寫(xiě)一個(gè)系列的文章,把這種集中學(xué)習(xí)中遇到一些令我的困擾一時(shí)的點(diǎn)好好再總結(jié)一番。而這些因應(yīng)工...
摘要:因?yàn)榛€的不同,這就會(huì)導(dǎo)致內(nèi)聯(lián)元素在默認(rèn)使用定位時(shí),會(huì)出現(xiàn)同一行元素的錯(cuò)位問(wèn)題。那么有沒(méi)有和基線一樣的確定準(zhǔn)則呢當(dāng)然有,一個(gè)業(yè)界公認(rèn)的標(biāo)準(zhǔn)就是同一行內(nèi)聯(lián)元素中,中線穿過(guò)的是小寫(xiě)的中點(diǎn)。 暑假前因?yàn)榉N種原因沒(méi)有把百度IFE的先期課程學(xué)完,這個(gè)暑假又參加了相關(guān)項(xiàng)目開(kāi)發(fā),邊做邊學(xué)也總結(jié)了一些教訓(xùn)。現(xiàn)在打算寫(xiě)一個(gè)系列的文章,把這種集中學(xué)習(xí)中遇到一些令我的困擾一時(shí)的點(diǎn)好好再總結(jié)一番。而這些因應(yīng)工...
摘要:從一個(gè)內(nèi)聯(lián)元素布局引發(fā)對(duì)的探討一前言這個(gè)屬性對(duì)于各位前端的小伙伴來(lái)說(shuō)并不陌生。對(duì)于塊級(jí)元素,它指定元素行盒的最小高度。對(duì)于非替代的元素,它用于計(jì)算行盒的高度。如存在屬性的六總結(jié)以上就是本人對(duì)行內(nèi)布局以及的一些思考總結(jié)。 從一個(gè)內(nèi)聯(lián)元素布局引發(fā)對(duì)line-height的探討 一、前言 line-height這個(gè)屬性對(duì)于各位前端的小伙伴來(lái)說(shuō)并不陌生。在之前寫(xiě)頁(yè)面的時(shí)候碰到過(guò)一個(gè)該屬性相關(guān)的...
閱讀 2922·2021-11-24 09:39
閱讀 3599·2021-11-22 13:54
閱讀 3409·2021-11-16 11:45
閱讀 2432·2021-09-09 09:33
閱讀 3194·2019-08-30 15:55
閱讀 1290·2019-08-29 15:40
閱讀 920·2019-08-29 15:19
閱讀 3396·2019-08-29 15:14