line-height和vertical-align的關(guān)系(一)

說在前面:最近在學習張鑫旭大神的《css行高line-height的一些深入理解及應用》和《CSS深入理解vertical-align和line-height的基友關(guān)系》這兩篇文章的時候遇到一些問題,困擾了很久叶眉,如果有遇到相同問題的蹦肴,希望本文對你有所幫助,如果有理解錯誤浆兰,還請指出雨饺!更多內(nèi)容還請看荐吉,以上兩篇文章,比我講的更詳細剑逃,這里只分享自己的一些理解浙宜。

一、問題:

? div盒子(其他元素同)在未設定高度的時候蛹磺,高度由內(nèi)容的高度撐開粟瞬。好像這句話沒什么問題,就像下面一樣:

01.png
   * {
         margin: 0;
         padding: 0;
     }
div {
         width: 200px;
         border: 1px solid;
         margin: 50px auto;  
     }
img {
       width: 100px;
    }
<div>
     <img src="/Pictures/Saved Pictures/路飛.jpg" alt="">
</div>

? 但細心的你一定發(fā)現(xiàn)萤捆,為什么圖片的底部邊緣怎么沒有和div的底部邊挨在一起裙品,不是說div的高度在未設定的情況下,高度由內(nèi)容的高度撐開嘛俗批?

02.png

? 首先這句話沒有錯,但為什么會有這個問題呢市怎?

? 這里就和vertical-align有關(guān)系了,圖片(行內(nèi)塊元素同)默認和文字的對齊方式baseline岁忘,也就是說圖片是基于基線對齊,那基線時什么呢?這里就又和line-height又有關(guān)了区匠。

? 這里直接用大神的話:

“行高”顧名思意指一行文字的高度干像。具體來說是指兩行文字間基線之間的距離〕叟基線實在英文字母中用到的一個概念麻汰,我們剛學英語的時使用的那個英語本子每行有四條線,其中底部第二條線就是基線戚篙,是a,c,z,x等字母的底邊線五鲫。下圖的紅色線即為基線。

base_line.jpg

? 如果對于行高有一定理解的你會問岔擂,在div盒子里面沒有文字位喂,怎么會和文字的基線對齊呢?這里可以理解為了讓圖片和文字對齊乱灵,在圖片(行內(nèi)塊)前后有個透明字符存在且寬度為0塑崖,不占位置,方便的圖片(行內(nèi)塊)在垂直方向的對齊阔蛉,為了方便理解我們可以自己加一個真實的字符弃舒,情況也是相同的,請看:

03.png

? 所以這里 div的高度 = 內(nèi)容的高度 = 圖片的高度 + 透明字符的高度状原,但這個等式不嚴謹,不是完全相等苗踪,還請看下面颠区。

二、多出來的高度是什么?

? 盒子的高度是怎么來的呢通铲?

? 答毕莱;盒子的高度是由所有行框高度累加起來的。

04.png

? 注意:文本框內(nèi)的線與線的距離畫的不是很嚴謹

這里還要解決兩個問題:什么是行內(nèi)框颅夺?什么行框朋截?

行內(nèi)框:

1.行內(nèi)元素寬高組成的框或者行內(nèi)塊寬高形成的框;

2.行內(nèi)元素的行內(nèi)框的高度等于line-height

3.行內(nèi)塊的行內(nèi)框的高度等于圖片的高度 + padding + border

行框:

1.由所有的行內(nèi)框組成的吧黄;

2.==行框的高度最高的行內(nèi)框頂部 到 最低行內(nèi)框的底部之間的距離==

那么我們現(xiàn)在就可以很清楚的知道部服,下面多出來高度的部分其實是 基線文本行框距離。

05.png

三拗慨、怎么解決這個問題?

? 知道多出來的部分高度是什么就很好解決了廓八。

? 在還是圖片(行內(nèi)塊)默認vertical-align:baseline情況下奉芦,我們可以讓文本行內(nèi)框的行高足夠小,至少要使行高小于等于中線到基線的距離(文本默認在文本行內(nèi)框中垂直居中)剧蹂,這樣文本行內(nèi)框的底部與基線重合或者在基線之上声功。在文本的基線和它的行內(nèi)文本框底部重合的時候,最低的行內(nèi)框是 圖片文本框(和文本的基線對齊) 和 文本行內(nèi)框宠叼;文本的行內(nèi)框的底部在基線之上時先巴,最低的就是圖片文本框了。這兩種情況下外面div的高度就和圖片的高度相等了冒冬。

寫成代碼的話可以:

1.直接控制line-height的值伸蚯,line-height=0 ;

06.png
* {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            border: 1px solid;
            margin: 50px auto;
            line-height: 0;
            
        }
        img {
            width: 100px;
        }
<div>
        <img src="Pictures/Saved Pictures/路飛.jpg" alt="">
        <span>x</span>
    </div>

2.間接控制line-height行高等于0,可以讓font-size = 0 窄驹。


07.png
 * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            border: 1px solid;
            margin: 50px auto;
            /* line-height: 0; */
            font-size: 0;
            
        }
        img {
            width: 100px;
        }
<div>
        <img src="Pictures/Saved Pictures/路飛.jpg" alt="">       
        <span>x</span>
    </div>

四朝卒、其他方法

? 在理解多余出來的高度是怎么來的之后,我們還可以用其他方法來去掉這個多余的高度乐埠,使圖片(行內(nèi)塊)不基于baseline對齊就好了抗斤,比如top、middle丈咐、bottom等等瑞眼,或者解決改變圖片的(行內(nèi)塊)的顯示模式為block。

五 棵逊、待續(xù)

? 迷迷糊糊伤疙,說了自己的一些理解,有的問題還沒講到辆影,只能待有空了再補上??

?

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末徒像,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子蛙讥,更是在濱河造成了極大的恐慌锯蛀,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件次慢,死亡現(xiàn)場離奇詭異旁涤,居然都是意外死亡,警方通過查閱死者的電腦和手機迫像,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門劈愚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人闻妓,你說我怎么就攤上這事菌羽。” “怎么了纷闺?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵算凿,是天一觀的道長份蝴。 經(jīng)常有香客問我,道長氓轰,這世上最難降的妖魔是什么婚夫? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮署鸡,結(jié)果婚禮上案糙,老公的妹妹穿的比我還像新娘。我一直安慰自己靴庆,他們只是感情好时捌,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著炉抒,像睡著了一般奢讨。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上焰薄,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天拿诸,我揣著相機與錄音,去河邊找鬼塞茅。 笑死亩码,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的野瘦。 我是一名探鬼主播描沟,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼鞭光!你這毒婦竟也來了吏廉?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤惰许,失蹤者是張志新(化名)和其女友劉穎迟蜜,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體啡省,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年髓霞,在試婚紗的時候發(fā)現(xiàn)自己被綠了卦睹。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡方库,死狀恐怖结序,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情纵潦,我是刑警寧澤徐鹤,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布垃环,位于F島的核電站,受9級特大地震影響返敬,放射性物質(zhì)發(fā)生泄漏遂庄。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一劲赠、第九天 我趴在偏房一處隱蔽的房頂上張望涛目。 院中可真熱鬧,春花似錦凛澎、人聲如沸霹肝。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽沫换。三九已至,卻和暖如春最铁,著一層夾襖步出監(jiān)牢的瞬間讯赏,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工炭晒, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留待逞,地道東北人。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓网严,卻偏偏與公主長得像识樱,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子震束,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 參考文章:深入了解CSS的line-height屬性Vertical-Align: 你需要知道的所有事【譯】Ver...
    若邪Y閱讀 3,452評論 1 6
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案怜庸? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,762評論 1 92
  • vertical-align 先看一個例子 baseline(默認值)基線,盒子的基線大約在其內(nèi)部文字(匿名)盒子...
    吳立寧閱讀 2,536評論 0 4
  • 基本框 CSS假定每個元素都會生成一個或多個矩形框,這稱為元素框垢村。各元素框中心有一個內(nèi)容區(qū)(content are...
    exialym閱讀 770評論 0 2
  • 有些東西我們經(jīng)常用割疾,但是我們卻并不了解它的原理,所以一旦換了場景嘉栓,好多東西就不知道該怎么用了宏榕。最近一直很糾結(jié)ver...
    朱小維閱讀 4,950評論 8 34