一、為什么要寫這篇文章
今天看到一個(gè)問題：
兩個(gè)div 都設(shè)置 display：inline-block，正常顯示；但是在第二個(gè)div中加一個(gè)塊級元素或者內(nèi)聯(lián)元素，顯示就變了個(gè)樣，為什么？
<meta charset="utf-8"/>
<style>
div{
width: 100px;
height: 100px;
border:1px solid red;
display: inline-block;
}
.align{
/* vertical-align: top;*/
}
</style>
<body>
<div>
</div>
<div class="align">為什么？</div>
</body>
解決方案就是給第二個(gè)div加上：vertical-align:top。
關(guān)于vertical-align和基線我知道一點(diǎn)，但是這個(gè)問題我沒能答出，所以學(xué)習(xí)總結(jié)分享一下。
二、vertical-align干什么的？
w3c有一段相關(guān)信息如下：
'vertical-align' Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit Initial: baseline Applies to: inline-level and 'table-cell' elements Inherited: no Percentages: refer to the 'line-height' of the element itself Media: visual Computed value: for <percentage> and <length> the absolute length, otherwise as specified
可以看到vertical-align影響inline-level元素和table-cell元素垂直方向上的布局。根據(jù)MDN描述，vertical-align對::first-letter和::first-line同樣適用。
適用于：
inline水平的元素
inline:<img>,<span>,<strong>,<em>,未知元素
inline-block:<input>(IE8+),<button><IE8+>....
'table-cell'元素
table-cell:<td>
所以默認(rèn)情況下，圖片，按鈕，文字和單元格都可以用vertical-align屬性。
取值：
三、baseline
1、字母‘x’與baseline
字母x的下邊緣（線）就是基線。不是字母s之類下面有尾巴的字母
基線甚至衍生出了：
1.“alphabetic” baseline: “字母”基線 – 英文
2.“hanging” baseline: “懸掛”基線 – 印度文
3.“ideographic” baseline: “表意”基線 – 中文
2、baseline的確定規(guī)則
1、inline-table元素的baseline是它的table第一行的baseline。
2、父元素【line box】的baseline是最后一個(gè)inline box 的baseline。
3、inline-block元素的baseline確定規(guī)則
規(guī)則1：inline-block元素，如果內(nèi)部有l(wèi)ine box，則inline-block元素的baseline就是最后一個(gè)作為內(nèi)容存在的元素[inline box]的baseline，而這個(gè)元素的baseline的確定就要根據(jù)它自身來定了。
規(guī)則2：inline-block元素，如果其內(nèi)部沒有l(wèi)ine box或它的overflow屬性不是visible，那么baseline將是這個(gè)inline-block元素的底margin邊界。
3、例子：inline-block例子
上圖描述：
上圖中從左到右都是line-block元素，紅線代表margin-box的邊界，藍(lán)線代表baseline；黃色為border，綠色為padding，藍(lán)色為content。
左邊元素包含著沒有脫離正常流的內(nèi)容c，中間元素除了沒有脫離正常流的內(nèi)容c外還增加了overflow:hidden，右邊元素沒有內(nèi)容，但是內(nèi)容區(qū)有寬高。
分析圖中各種情況inline-block元素的baseline：
上圖左圖，inline-block元素有處于正常流的內(nèi)容，根據(jù)規(guī)則1，所以inline-block的baseline就是最后一個(gè)作為內(nèi)容存在的元素的baseline，也就是內(nèi)容c的baseline，而c的baseline根據(jù)自身定，就是圖中藍(lán)色。
上圖中圖，inline-block元素overflow:hidden不為visible，根據(jù)規(guī)則2，該inline-block元素baseline就是inline-block元素的margin-box的下邊界了，即圖中藍(lán)線。
上圖右圖，inline-block元素沒有內(nèi)容，根據(jù)規(guī)則2，所以其baseline為margin-box的下邊界，即藍(lán)線。
4、例子：baseline確定規(guī)則例子