摘要：看上面的例子我們也能看出來(lái)，實(shí)際上一個(gè)內(nèi)聯(lián)元素是有兩個(gè)高度的高度實(shí)際渲染的那個(gè)高度和高度實(shí)際區(qū)域占空間的高度也就是。

前言

總括： 本文通過(guò)實(shí)例講解CSS中最大的難點(diǎn)之一，行內(nèi)元素的布局，主要是挖掘line-height和vertical-align兩個(gè)屬性在布局方面的使用。

原文博客地址：深入理解行內(nèi)元素的布局

知乎專欄&&簡(jiǎn)書專題：前端進(jìn)擊者（知乎）&&前端進(jìn)擊者（簡(jiǎn)書）

博主博客地址：Damonare的個(gè)人博客

白茶清歡無(wú)別事，我在等風(fēng)，也在等你。?

正文

講道理line-height和vertical-align 這對(duì)基是十分低調(diào)的，日常開(kāi)發(fā)中碰到的很多莫名其妙的bug很大一部分都是這倆貨搞出來(lái)了的，但很少有人知道這對(duì)基的罪惡，因?yàn)榭赡芑ㄊ礁膶懸幌翪SS代碼問(wèn)題就解決了。實(shí)際上搞明白這倆東西才能讓我們?cè)诓季止ぷ髦杏稳杏杏唷１疚慕酉聛?lái)就通過(guò)這對(duì)基的關(guān)系來(lái)了解內(nèi)聯(lián)元素具體的布局問(wèn)題~we are刨根問(wèn)底攔不住~?

? 讀這篇文章之前請(qǐng)確定您有以下知識(shí)基礎(chǔ):

line-height的數(shù)字值是和font-size大小相關(guān)的；

vertical-align的百分比值是和line-height值相關(guān)的；

引出vertical-align

首先來(lái)看一個(gè)?：

  Xx

.test {
      background: red;
}
img {
    width: 50px;
    height: 50px;
}
span {
    background: white;
}

下面無(wú)實(shí)例內(nèi)容的話戳這里

如上可證明，inline元素的高度決定者是line-height，并不是文字內(nèi)容撐開(kāi)的。??

CSS規(guī)范里對(duì)line-height的默認(rèn)值有這么一句話：

We recommend a used value for "normal" between 1.0 to 1.2.

只是推薦...?是不是說(shuō)實(shí)際上各個(gè)瀏覽器對(duì)于line-height的默認(rèn)值實(shí)現(xiàn)不一定是一樣的，但都介于1.0-1.2之間。具體各大瀏覽器的實(shí)現(xiàn)值待查證。這里需要記住line-height的默認(rèn)值是啥就OK。

IFC

在之前的博文CSS的盒子模型里面，有拓展過(guò)相關(guān)知識(shí)，簡(jiǎn)短的介紹了下BFC和IFC，相較于BFC，IFC要復(fù)雜得多，規(guī)范里IFC的篇幅也要比BFC多得多。

簡(jiǎn)要總結(jié)下BFC，即塊級(jí)元素可能會(huì)觸發(fā)塊級(jí)格式上下文(BFC)，在塊級(jí)格式上下文中，塊級(jí)盒子豎直方向排列，不受上下文外部元素影響，自成一方世界。塊容器盒指的是那些包含元素的盒子，塊容器盒可能包含其它塊級(jí)盒，也可能生成一個(gè)行內(nèi)格式上下文(IFC)。?

但塊容器盒要么只包含行內(nèi)盒，要么只包含塊級(jí)盒。但通常會(huì)同時(shí)包含兩者。在這種情況下，將創(chuàng)建匿名塊盒來(lái)包含毗鄰的行內(nèi)級(jí)盒。

看個(gè)?：

//demo1

  Some inline text 
  
followed by a paragraph
 
  followed by more inline text.

// demo2

  Some inline text 
  followed by a paragraph 
  followed by more inline text.

如上，demo1將創(chuàng)建兩個(gè)匿名塊盒，一個(gè)包含 p前面的文本 (Some inline text)， 一個(gè)包含 p 后面的文本(followed by more inline text)。

demo2將生成一個(gè)行內(nèi)格式上下文，生成一個(gè)匿名行盒(line box)，里面包含兩個(gè)匿名行內(nèi)盒(inline box)，Some inline text 和followed by more inline text.和一個(gè)span行內(nèi)盒。

OK，至于怎么觸發(fā)塊級(jí)格式上下文請(qǐng)看塊格式化上下文。這里只為了說(shuō)明IFC而介紹下BFC。

當(dāng)元素的 CSS 屬性 display 的計(jì)算值為 inline, inline-block 或 inline-table 時(shí)，稱它為行內(nèi)級(jí)元素。
行內(nèi)級(jí)元素生成行內(nèi)級(jí)盒(inline-level boxes)，參與行內(nèi)格式化上下文(inline formatting context)。同時(shí)參與生成行內(nèi)格式化上下文的行內(nèi)級(jí)盒稱為行內(nèi)盒(Inline boxes)。

規(guī)范里IFC文字很多，提煉下我們需要的：

如果一個(gè)矩形區(qū)域，包含著一些排成一條線的盒子，稱為line box。
一個(gè)line box的寬度，由他的包含塊(containg block)和floats的存在情況決定。line box的高度，由你給出的代碼決定。(line-height)，即所有inline box的最大高度差。
當(dāng)盒子的高度小于父級(jí)盒子高度時(shí)，垂直方向的對(duì)齊"vertical-align"屬性決定。

Vertical-align(2)

在上面的vertical-align(1)中主要了解了什么是baseline，以及它是如何確定的。我們繼續(xù)研究這個(gè)屬性，看下面說(shuō)明表格：

值	描述
baseline	默認(rèn)。元素放置在父元素的基線上。
top	把元素的頂端與行中最高元素的頂端對(duì)齊
text-top	把元素的頂端與父元素字體的頂端對(duì)齊
middle	把此元素放置在父元素的中部。
bottom	把元素的頂端與行中最低的元素的頂端對(duì)齊。
text-bottom	把元素的底端與父元素字體的底端對(duì)齊。

除了baseline我們已經(jīng)很了解之外，其它幾個(gè)屬性我們貌似也能看懂，唯一的問(wèn)題可能是父元素的頂端低端都是什么鬼？?需要確定一下，好的再次拿我們第一個(gè)例子來(lái)講解，但我們需要變一下，加點(diǎn)東西進(jìn)去：

  
    Xx
  

.demo {
  background: red;
}
.line-box {
  background: blue;
  line-height: 200px;
}
.line-box img {
  vertical-align: text-bottom;
  width: 50px;
}
.line-box span {
  margin-left: 20px;
  color: yellow;
}

實(shí)例

上面例子中，我們更改了Xx的對(duì)齊方式，發(fā)現(xiàn)了很奇特的現(xiàn)象?，當(dāng)Xx設(shè)置為text-bottom或是text-top的時(shí)候父元素(ling box)被撐大了?，但這另一方面這也證明了，父元素的基線和中線等并不是由文本Xx決定的，誰(shuí)決定的呢？前面提過(guò)的那個(gè)空白節(jié)點(diǎn)決定的！?這個(gè)空白節(jié)點(diǎn)實(shí)際上是理解內(nèi)聯(lián)元素布局的重點(diǎn)！不知道它的存在，很多問(wèn)題是搞不清楚的。那么這個(gè)空白節(jié)點(diǎn)又到底是怎么影響布局的呢？前面說(shuō)過(guò)基線的決定著是小寫字母x，這個(gè)時(shí)候問(wèn)題就來(lái)了，可能你早就想問(wèn)了，不同字體下面的小寫字母x底部邊緣肯定是有區(qū)別的啊，好，我們?cè)谘芯肯?b>font-family。

Font-family

我們?cè)賮?lái)看一個(gè)?:

下面沒(méi)示例內(nèi)容請(qǐng)戳這