成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

img的間隙

妤鋒シ / 1776人閱讀

摘要：變成塊元素文章前部分講到了只是對(duì)于內(nèi)聯(lián)元素而言，自己的給添加樣式將其轉(zhuǎn)為塊元素自然間隙就會(huì)消失，不過(guò)這樣也會(huì)產(chǎn)生一些副作用。

*{
    padding: 0px;
    margin: 0px;
}
.test{
    border: 1px solid red;
    width: 600px;
}

上述代碼產(chǎn)生的效果如圖所示，但是另人感到驚奇的是，img與div之間存在著一個(gè)間隙，這個(gè)間隙是怎么產(chǎn)生的？應(yīng)該怎么解決？下面我們一點(diǎn)點(diǎn)的探尋這個(gè)問(wèn)題背后的一些原理：

問(wèn)題產(chǎn)生：

這個(gè)問(wèn)題產(chǎn)生主要是由于baseline造成的，先來(lái)了解下baseline，這是一個(gè)在英文的文字排版中體現(xiàn)比較明顯的概念：

baseline只是在內(nèi)聯(lián)元素中才有的概念，在塊元素中并沒(méi)有這種概念，也就是說(shuō)只有在ifc下才會(huì)有這一概念，并且內(nèi)聯(lián)元素的vertical-align的默認(rèn)值就為baseline，也就是根據(jù)基線對(duì)齊。
對(duì)應(yīng)著baseline還有兩條標(biāo)準(zhǔn)線，分別為bottom和top，下面這張圖說(shuō)明了三條線所處的位置：

img是一內(nèi)聯(lián)元素，其根據(jù)baseline對(duì)齊，那條間隙就是baseline到bottom的距離，既然現(xiàn)在問(wèn)題搞清楚了，下面就來(lái)解決它：

解決問(wèn)題：

解決這個(gè)問(wèn)題有4種方法（歡迎大家補(bǔ)充，我只想到這4種）：

line-height
給div.test添加樣式line-height: 0px;就可以解決這個(gè)問(wèn)題，這個(gè)原理很簡(jiǎn)單，因?yàn)?b>line-height指的是bottom到top的距離，將其設(shè)置為0也就是代表著baseline與bottom之間的距離為0，自然那條間隙就消失啦；同理我們可以得出的就是指定font-size: 0px;也是可以解決，因?yàn)?b>line-height在不指定時(shí)值默認(rèn)為font-size * 一個(gè)系數(shù)(1.2 or other)，但是這種情況下不能有文字出現(xiàn)。

img變成塊元素
文章前部分講到了baseline只是對(duì)于內(nèi)聯(lián)元素而言，自己的給img添加樣式display: block;將其轉(zhuǎn)為塊元素自然間隙就會(huì)消失，不過(guò)這樣也會(huì)產(chǎn)生一些副作用。

給div.test添加height
這種方式比較簡(jiǎn)單那就讓div.test只有圖片那么高，這樣也會(huì)有副作用，文字可能會(huì)移除，就像下圖這樣：

改變vertical-align
改變垂直對(duì)齊方式，比如指定vertical-align: bottomorvertical-align: toporvertical-align: middle，可以很完美的解決這個(gè)問(wèn)題，但是產(chǎn)生的效果值得讓人琢磨一番，下面就來(lái)解讀下：

理解vertical-align

先來(lái)改下最開(kāi)始的代碼：

*{
    padding: 0px;
    margin: 0px;
    font-size: 24px;
}
.test{
    border: 1px solid red;
    width: 600px;
    margin: 10px 200px;
}
.test img{
    vertical-align: top;
}


    
    zp1996

效果如上圖所示，可以發(fā)現(xiàn)的文字怎么跑到了上面去，這是什么鬼？只是改變了img的垂直對(duì)齊方式為什么會(huì)影響到span呢？
其實(shí)需要明白的是，不是img上去了，而是下去了，來(lái)分解下步驟解釋下這個(gè)理論：


第一步就是形成上圖這樣的效果，第二步就是給div.test添加一個(gè)img標(biāo)簽，并且以top先對(duì)齊，所以就會(huì)產(chǎn)生有蠟筆小新的那個(gè)效果。
但是和實(shí)驗(yàn)室學(xué)長(zhǎng)討論時(shí)，學(xué)長(zhǎng)說(shuō)這個(gè)過(guò)程不符合dom順序編譯形成樹(shù)的流程啊，一想對(duì)啊，難道不是這樣嗎？誒不對(duì)啊，img是置換元素，它需要依賴其src屬性啊，而圖片加載的過(guò)程會(huì)比較慢，不能等著加載圖片而不去編譯后面的代碼吧，肯定是用異步加載的吧，這么想下上面拆分的那個(gè)過(guò)程是對(duì)的?。〉降诪g覽器真實(shí)的是不是這樣的呢不得而知，但是從效果來(lái)看應(yīng)該是這樣的。

注: 這只是個(gè)人的一些想法，如有不對(duì)，歡迎指出

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/111507.html

相關(guān)文章

  • CSS學(xué)習(xí)筆記－圖片img與父元素div之間的間隙解決

    摘要：前言之前在寫網(wǎng)頁(yè)的時(shí)候有一個(gè)展示圖片的需求我使用一個(gè)包裹一個(gè)但是在瀏覽器中預(yù)覽的時(shí)候碰到了一下的問(wèn)題仔細(xì)看圖片和之間有間隙。正文指定了行內(nèi)元素或表格單元格元素的垂直對(duì)齊方式摘錄自。設(shè)置父元素字體大小為所用的值是無(wú)單位數(shù)值乘以元素的。 前言 之前在寫網(wǎng)頁(yè)的時(shí)候有一個(gè)展示圖片的需求,我使用一個(gè)div包裹一個(gè)img,但是在瀏覽器中預(yù)覽的時(shí)候碰到了一下的問(wèn)題,showImg(https://s...

    Chiclaim 評(píng)論0 收藏0

  • 多個(gè)Img標(biāo)簽之間的間隙處理方法

    摘要：多個(gè)標(biāo)簽寫在一行郁金香郁金香郁金香郁金香效果前效果后將要閉合標(biāo)簽的地方與開(kāi)始標(biāo)簽的地方重合郁金香郁金香使用注釋頭尾相連郁金香郁金香在標(biāo)簽的父級(jí)上寫推薦是用這個(gè)方法。1.多個(gè)標(biāo)簽寫在一行 效果前： 效果后： ? ? 2.將要閉合標(biāo)簽的地方與開(kāi)始標(biāo)簽的地方重合 ? 3.使用注釋頭尾相連 ? ? 4.在img標(biāo)簽的父級(jí)上寫：font-size:0;? 推薦是用這個(gè)方法。這...

    firim 評(píng)論0 收藏0

  • 踩坑日記(持續(xù)更新...)

    摘要：二按照官方的提示解決了意思就是切到分支，自己的分支解決沖突，提交。這是和二相反向的操作頁(yè)面標(biāo)題無(wú)效的解決辦法強(qiáng)類型轉(zhuǎn)換的坑條件用正則返回的布爾值結(jié)果返回了條件結(jié)果也返回了。 2018/3/2 1,vue的{{}}怎么失效了項(xiàng)目使用了twig模板渲染 語(yǔ)法{{}}沖突，使用v-text v-html渲染 可以寫表達(dá)式的寫法 字符+變量 2，函數(shù)防抖節(jié)流封裝實(shí)用的下拉加載更多代碼demo...

    taoszu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<