1.vertical-align
默認值：baseline 即設置該屬性的元素的基線(baseline)與行框的基線對齊。W3C上描述的是與父級元素的基線對齊是不準確的，比如出現多行的情況。
生效的對象 : 只對inline,inline-block的元素有效，對塊級元素無效。
繼承性：無繼承性
常用的值：
baseline :元素的基線與行框的基線對齊。
middle : 元素所在行內框的中線與行框的中線對齊。
top : 元素所在行內框的頂邊與行框內高度最大的行內框頂部對齊
bottom : 元素所在行內框的底邊與行框內高度最大的行內框底部對齊
固定值 : 元素的基線相對行框基線向上(為正值時)或向下((為負值時)偏移指定距離。
text-top :元素頂部與行框內的匿名文本的頂部對齊。
text-bottom :元素底部與行框內的匿名文本的底部對齊。
行內元素在布局時，首先也是最重要的是確定行框的基線位置。
2.line-height
line-height行高是指文本行基線之間的距離。行高line-height實際上只影響行內元素和其他行內內容，而不會直接影響塊級元素，也可以為一個塊級元素設置line-height，但這個值只是應用到塊級元素的內聯內容時才會有影響。在應用到塊級元素時，line-height定義了元素文本基線之間的最小距離，即最小行高
line-height不會對inline-block的元素直接起作用，但可能會作用在inline-block的子元素上，這樣間接改變inline-block高度
默認值:normal（大概是font-size的1.3倍）
應用于：所有元素
可繼承
常用值：
固定值 ： 會被子元素繼承這個定值
normal ：相當于數字1.3
百分數：相對于元素的font-size計算(font-size可繼承)。這個值會被子元素繼承下去(計算出來的定值)。
數字 ：相對于元素的font-size計算，但是子元素只會繼承這個數字，然后根據自己的font-size計算各自的line-height
3.替換元素和非替換元素
替換：img input button textarea 自定義的inline-block
非替換 : i,a,span等
4.各種行內元素的基線與中線位置
Input框
基線位置 輸入的字母x的底部，
middle線 位置， 包含margin之后這個行內框高度的中間。middle對齊時就是middle線與行框的x的中心對齊
Textarea ，img
基線位置 元素底部(含margin框哦) middle線位置 包含margin之后這個行內框高度的中間。
Button按鈕
基線位置 里面字母x的底部，middle線位置，包含margin之后該行內框高度的中間 。
自定義inline-block
只有一行的inline-block 如果加上了overflow屬性，其表現和 textarea img是一樣(我也不知道原理是啥，input框基線位置不會受overflow影響) ，基線為包含margin之后該行內框高度的底部 。不加的話 基線位置 在里面字母x的底部
overflow只影響inline block的基線位置，middle線位置不管怎樣都是 包含margin之后該行內框高度的中間
對于里面有多行的inline-block
沒有overflow屬性的情況下，基線位置 這個inline-block里最后一行(如果只有一行，那這行就是最后一行)的行框里面的x的底部 ，不管這個inline block是否定高，內容是否溢出, 也就是說就算里面的內容超出了block的邊界，基線位置還是最后一行的x的底部。
設置了overflow屬性之后，基線位置和單行時的情況是一樣的。
middle線的位置為包含margin之后該行內框高度的中間 。
Inline元素
這里我把由display為inline的標簽包裹的字體形成的盒子，稱為字體盒子(自己起的名字)，像這種<span>xxx<span> ，在chrome中檢查元素，包裹字體的藍色塊就是個字體盒子。字體盒子的高度只和font-size有關，默認大概為font-size的1.3倍，在span里面改變line-height,字體盒子的高度不會變化，但是注意雖然字體盒子的高度沒變，但是字體盒子所在的inline box的高度是變了的(line-height改變的)，我們用眼睛看不到這個高度的。字體盒子的高度的中間線和該inline box的高度中間線是重合的，也就是說字體盒子是在inline box的中間的，并不是文字在中間，因為字體盒子的中間并不是文字的中間 。像這種inline元素的基線位置在字母x的底部，middle線在這個inline box高度的中間，也是這個字體盒子的中間（不是字體的中間），因為無論line-height比字體盒子高度大還是小，它的中間線和字體盒子的中間線都是重合的。
在進行行內元素布局時，每個inline box會根據自己的vertical-align去找參照物對齊。然后計算最高的inline box的頂部和最低的inline box的底部間的距離,這就是這行的高度了。
行框的middle就是確定基線的那個x的中線(過中心交點的平行線)
關于這些只在chrome上試過，其他瀏覽器規則是否一樣有待試驗。
用來測試的代碼
<!DOCTYPE html>
<html>
<head>
<title>demo4</title>
<style type="text/css">
input {
width: 150px;
height: 80px;
}
textarea {
width: 200px;
height: 100px;
}
div{
background-color: #ccc;
}
input {
font-size: 30px;
width: 150px;
height: 80px;
vertical-align: middle;
/* margin-bottom: 17px; */
overflow: hidden;
}
textarea {
width: 150px;
height: 134px;
}
</style>
</head>
<body>
<div style="
/* line-height: 100px; */
">xX
<input type="text" name="" placeholder="input">
<textarea style="
vertical-align: middle;
">textarea</textarea>
<button style="
vertical-align: middle;
margin-bottom: 0px;
height: 100px;
">x</button> x
<span style="
display: inline-block;
vertical-align: baseline;
height: 30px;
/* width: 20px; */
/* overflow: hidden; */
margin-bottom: 10px;
">x<br>x</span>
<span style="
/* overflow: hidden; */
/* font-size: 30px; */
line-height: 6px;
vertical-align: middle;
/* margin-bottom: 10px; */
">xx<span></span></span></div>
</body>
</html>
感謝：
深入了解css的行高Line Height屬性
深入理解line-height與vertical-align
我對CSS vertical-align的一些理解與認識（一）
CSS深入理解vertical-align和line-height的基友關系
