成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

進(jìn)一步理解：inline-block，vertical-align，line-height

Miracle / 612人閱讀

摘要：左起第一個(gè)矩形內(nèi)部有文字，屬于內(nèi)聯(lián)元素，那么第一個(gè)的基線為內(nèi)部的基線，第二個(gè)的內(nèi)部無內(nèi)聯(lián)元素，那么它的基線就是的底端，第三個(gè)內(nèi)部有內(nèi)聯(lián)元素，但是他的屬性為，不是，所以它的基線還是的底端。

看似三個(gè)最常見的概念背后卻隱藏了很深的很深“水”
那有多深呢，先來看下面的代碼

引出問題 



   




   


    x
    

 

    x
    x
    
    xjq

好，同學(xué)們把這四段代碼放到編輯器里面然后打開瀏覽器，如果對于你眼前的畫面沒有感到疑惑，那么其實(shí)你就無需向下看了

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.).

翻譯成國語：

在一個(gè)由行內(nèi)元素組成的塊級元素中，line-height指定了這個(gè)元素中的所有l(wèi)ine box的最小高度。這個(gè)最小高度包括在baseline上面的最小高度和baseline下面的最小深度，就好像每個(gè)line box是由一個(gè)0寬度的，有著元素的font和line-height屬性的行內(nèi)框開始的，我們稱這個(gè)虛擬的盒子為strut

關(guān)于baseline和line box的概念請參考張鑫旭大大的文章：
http://www.zhangxinxu.com/wor...

看著很亂是吧，上圖來看：

分析原因

這是前兩段代碼的示意圖，對比兩張圖發(fā)現(xiàn)span沒有寬高的情況下，baseline上下分別有隱形高度；設(shè)置寬高之后，下面的strut仍然存在，再來看第三段代碼的示意圖

圖中藍(lán)色區(qū)域?yàn)樾袃?nèi)框的高度，紅線即字母x的baseline,strut的高度正好是紅線到底邊框的高度，也就是說默認(rèn)垂直對齊方式是baseline;掃了一眼MDN關(guān)于vertical-align的文檔，默認(rèn)值果然是baseline，印證了這一說法。

看最后一段代碼示意圖：

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.

再來翻譯成國語：

對于一個(gè) inline-block 元素，如果它內(nèi)部沒有內(nèi)聯(lián)元素，或者它的overflow屬性不是visible，那么它的baseline就是元素margin的底端。否則，就是它內(nèi)部最后一個(gè)元素的基線。

好了，圖中三個(gè)框可以很好地理解這段話：

最前面的x是用來確定這個(gè)代碼中最外層的div的基線。左起第一個(gè)矩形內(nèi)部有文字，屬于內(nèi)聯(lián)元素，那么第一個(gè)inline-block的基線為內(nèi)部x的基線，第二個(gè)inline-block的內(nèi)部無內(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說起來就有點(diǎn)多了，簡單理解就是inline-block垂直方向設(shè)置非baseline，從而讓strut沒有頂?shù)降撞?，也就不?huì)有空白出現(xiàn)了

感覺自己寫的很亂，有耐心看完的同學(xué)真是謝謝你們了~~

還是張鑫旭大大寫得好寫的全
http://www.zhangxinxu.com/wor...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50104.html

相關(guān)文章

  • 進(jìn)一步理解：inline-block，vertical-align，line-height

    摘要：左起第一個(gè)矩形內(nèi)部有文字，屬于內(nèi)聯(lián)元素，那么第一個(gè)的基線為內(nèi)部的基線，第二個(gè)的內(nèi)部無內(nèi)聯(lián)元素，那么它的基線就是的底端，第三個(gè)內(nèi)部有內(nèi)聯(lián)元素，但是他的屬性為，不是，所以它的基線還是的底端。 看似三個(gè)最常見的概念背后卻隱藏了很深的很深水 那有多深呢，先來看下面的代碼 引出問題 .inline-block { display: inline-block; } ...

    zhou_you 評論0 收藏0

  • 【學(xué)習(xí)筆記】CSS深入理解之vertical-align

    摘要：上例中，左邊盒子的基線為其底邊緣，右邊盒子的基線為的基線將右邊盒子的行高設(shè)置為，即這個(gè)的高度為，位置處于中間。 vertical-align的值 線類：baseline（默認(rèn)）, top, bottom, middle 文字類：text-top, text-bottom 上標(biāo)下標(biāo)類：sub, super 數(shù)值：1px, 1em - 在baseline對齊的基礎(chǔ)上上下偏移一定數(shù)值 百分...

    ermaoL 評論0 收藏0

  • 前端碎語（1）

    摘要：因?yàn)榛€的不同，這就會(huì)導(dǎo)致內(nèi)聯(lián)元素在默認(rèn)使用定位時(shí)，會(huì)出現(xiàn)同一行元素的錯(cuò)位問題。那么有沒有和基線一樣的確定準(zhǔn)則呢當(dāng)然有，一個(gè)業(yè)界公認(rèn)的標(biāo)準(zhǔn)就是同一行內(nèi)聯(lián)元素中，中線穿過的是小寫的中點(diǎn)。 暑假前因?yàn)榉N種原因沒有把百度IFE的先期課程學(xué)完，這個(gè)暑假又參加了相關(guān)項(xiàng)目開發(fā)，邊做邊學(xué)也總結(jié)了一些教訓(xùn)?，F(xiàn)在打算寫一個(gè)系列的文章，把這種集中學(xué)習(xí)中遇到一些令我的困擾一時(shí)的點(diǎn)好好再總結(jié)一番。而這些因應(yīng)工...

    susheng 評論0 收藏0

  • 前端碎語（1）

    摘要：因?yàn)榛€的不同，這就會(huì)導(dǎo)致內(nèi)聯(lián)元素在默認(rèn)使用定位時(shí)，會(huì)出現(xiàn)同一行元素的錯(cuò)位問題。那么有沒有和基線一樣的確定準(zhǔn)則呢當(dāng)然有，一個(gè)業(yè)界公認(rèn)的標(biāo)準(zhǔn)就是同一行內(nèi)聯(lián)元素中，中線穿過的是小寫的中點(diǎn)。 暑假前因?yàn)榉N種原因沒有把百度IFE的先期課程學(xué)完，這個(gè)暑假又參加了相關(guān)項(xiàng)目開發(fā)，邊做邊學(xué)也總結(jié)了一些教訓(xùn)?，F(xiàn)在打算寫一個(gè)系列的文章，把這種集中學(xué)習(xí)中遇到一些令我的困擾一時(shí)的點(diǎn)好好再總結(jié)一番。而這些因應(yīng)工...

    jsdt 評論0 收藏0

  • 從一個(gè)內(nèi)聯(lián)元素布局引發(fā)對line-height的探討

    摘要：從一個(gè)內(nèi)聯(lián)元素布局引發(fā)對的探討一前言這個(gè)屬性對于各位前端的小伙伴來說并不陌生。對于塊級元素，它指定元素行盒的最小高度。對于非替代的元素，它用于計(jì)算行盒的高度。如存在屬性的六總結(jié)以上就是本人對行內(nèi)布局以及的一些思考總結(jié)。 從一個(gè)內(nèi)聯(lián)元素布局引發(fā)對line-height的探討 一、前言 line-height這個(gè)屬性對于各位前端的小伙伴來說并不陌生。在之前寫頁面的時(shí)候碰到過一個(gè)該屬性相關(guān)的...

    seal_de 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<