資訊專欄INFORMATION COLUMN
摘要：變成塊元素文章前部分講到了只是對于內聯元素而言，自己的給添加樣式將其轉為塊元素自然間隙就會消失，不過這樣也會產生一些副作用。
*{
padding: 0px;
margin: 0px;
}
.test{
border: 1px solid red;
width: 600px;
}
上述代碼產生的效果如圖所示，但是另人感到驚奇的是，img與div之間存在著一個間隙，這個間隙是怎么產生的？應該怎么解決？下面我們一點點的探尋這個問題背后的一些原理：
問題產生：這個問題產生主要是由于baseline造成的，先來了解下baseline，這是一個在英文的文字排版中體現比較明顯的概念：
baseline只是在內聯元素中才有的概念，在塊元素中并沒有這種概念，也就是說只有在ifc下才會有這一概念，并且內聯元素的vertical-align的默認值就為baseline，也就是根據基線對齊。
對應著baseline還有兩條標準線，分別為bottom和top，下面這張圖說明了三條線所處的位置：
img是一內聯元素，其根據baseline對齊，那條間隙就是baseline到bottom的距離，既然現在問題搞清楚了，下面就來解決它：
解決這個問題有4種方法（歡迎大家補充，我只想到這4種）：
line-height
給div.test添加樣式line-height: 0px;就可以解決這個問題，這個原理很簡單，因為line-height指的是bottom到top的距離，將其設置為0也就是代表著baseline與bottom之間的距離為0，自然那條間隙就消失啦；同理我們可以得出的就是指定font-size: 0px;也是可以解決，因為line-height在不指定時值默認為font-size * 一個系數(1.2 or other)，但是這種情況下不能有文字出現。
img變成塊元素
文章前部分講到了baseline只是對于內聯元素而言，自己的給img添加樣式display: block;將其轉為塊元素自然間隙就會消失，不過這樣也會產生一些副作用。
給div.test添加height
這種方式比較簡單那就讓div.test只有圖片那么高，這樣也會有副作用，文字可能會移除，就像下圖這樣：
改變vertical-align
改變垂直對齊方式，比如指定vertical-align: bottomorvertical-align: toporvertical-align: middle，可以很完美的解決這個問題，但是產生的效果值得讓人琢磨一番，下面就來解讀下：
先來改下最開始的代碼：
*{
padding: 0px;
margin: 0px;
font-size: 24px;
}
.test{
border: 1px solid red;
width: 600px;
margin: 10px 200px;
}
.test img{
vertical-align: top;
}
zp1996
效果如上圖所示，可以發現的文字怎么跑到了上面去，這是什么鬼？只是改變了img的垂直對齊方式為什么會影響到span呢？
其實需要明白的是，不是img上去了，而是下去了，來分解下步驟解釋下這個理論：
第一步就是形成上圖這樣的效果，第二步就是給div.test添加一個img標簽，并且以top先對齊，所以就會產生有蠟筆小新的那個效果。
但是和實驗室學長討論時，學長說這個過程不符合dom順序編譯形成樹的流程啊，一想對啊，難道不是這樣嗎？誒不對啊，img是置換元素，它需要依賴其src屬性啊，而圖片加載的過程會比較慢，不能等著加載圖片而不去編譯后面的代碼吧，肯定是用異步加載的吧，這么想下上面拆分的那個過程是對的??！到底瀏覽器真實的是不是這樣的呢不得而知，但是從效果來看應該是這樣的。
注: 這只是個人的一些想法，如有不對，歡迎指出
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111507.html
摘要：前言之前在寫網頁的時候有一個展示圖片的需求我使用一個包裹一個但是在瀏覽器中預覽的時候碰到了一下的問題仔細看圖片和之間有間隙。正文指定了行內元素或表格單元格元素的垂直對齊方式摘錄自。設置父元素字體大小為所用的值是無單位數值乘以元素的。 前言 之前在寫網頁的時候有一個展示圖片的需求,我使用一個div包裹一個img,但是在瀏覽器中預覽的時候碰到了一下的問題,showImg(https://s...
摘要：多個標簽寫在一行郁金香郁金香郁金香郁金香效果前效果后將要閉合標簽的地方與開始標簽的地方重合郁金香郁金香使用注釋頭尾相連郁金香郁金香在標簽的父級上寫推薦是用這個方法。1.多個標簽寫在一行 效果前： 效果后： ? ? 2.將要閉合標簽的地方與開始標簽的地方重合 ? 3.使用注釋頭尾相連 ? ? 4.在img標簽的父級上寫：font-size:0;? 推薦是用這個方法。這...
摘要：二按照官方的提示解決了意思就是切到分支，自己的分支解決沖突，提交。這是和二相反向的操作頁面標題無效的解決辦法強類型轉換的坑條件用正則返回的布爾值結果返回了條件結果也返回了。 2018/3/2 1,vue的{{}}怎么失效了項目使用了twig模板渲染 語法{{}}沖突，使用v-text v-html渲染 可以寫表達式的寫法 字符+變量 2，函數防抖節流封裝實用的下拉加載更多代碼demo...
閱讀 3036·2023-04-25 18:06
閱讀 3293·2021-11-22 09:34
閱讀 2866·2021-08-12 13:30
閱讀 2055·2019-08-30 15:44
閱讀 1668·2019-08-30 13:09
閱讀 1636·2019-08-30 12:45
閱讀 1722·2019-08-29 11:13
閱讀 3616·2019-08-28 17:51
