幾個概念
1. 行内元素
行内元素或者說内聯元素，指的是在一行内出現的元素。比如,,等；與行内元素對應的是塊狀元素，指的是獨占一行的元素，比如
,
,等，關于它們細緻的特性和定義，請自己百度。我用大白話來解釋下。如果說整個頁面容器比作一個背簍，那麼行内元素就相當于每條光溜溜的魚，不管大魚小魚都往裡放，它們之間可以認為沒有空隙，每條魚占的空間由它自己的大小決定；而塊狀元素就相當于把魚裝在一個包裝箱再放進背簍，每條魚占用多少空間由它的包裝箱決定，即使再小的魚裝進一個大箱子，還是占用一個大箱子的空間。這個例子隻是展現出它們占用空間的特性；至于塊狀元素占用一行的特性，你可以想像成裝魚的箱子是長條的，是不能往上累加的；如果非要往上累加的話，那就是行内塊狀元素，兼有行内元素和塊狀元素的特性。
2. 文檔流
頁面排版是有規則的，預設是自上而下，自左而右。凡是在這個規則之下的元素都是在文檔流裡的。就相當于電影院裡座位安排也是按照一定的順序來的。但是肯定有特殊情況，比如哪個富二代，哪個官二代要個專屬的位子，敢不給嗎。是以在頁面布局裡也有脫離文檔流的情況，就是接下來說的三個屬性。
2.1 positon:absolute
2.2 position:fixed
2.3 float
關于以上屬性的詳細用法，同樣在這裡不做贅述，請自行百度。隻要設定了這些屬性的無素，就可以脫離原有的布局規則，按新的規則來尋找位置。
http://img0.imgtn.bdimg.com/it/u=200851051,3718028993&fm=26&gp=0.jpg
元素位置
通過上面說的幾個概念，元素的位置就可以敲定了。在文檔流内的就是自上而下，自左而右依序而定。脫離文檔流的不在本文讨論範疇。
1. 高度
塊狀元素，前面說了它的占用大小是根據包裝盒的大小決定的，也就是屬性設定好的寬和高來的。而行内元素，本身是不具備寬高屬性的，它的高度是根據元素本身的大小來定的，比如字型大小，比如内邊距。。。
2. 對齊
鋪墊了這麼長終于要說到重點了。本文要讨論的主要是行内元素的高度對齊。因為塊狀元素的寬和高都是固定的，沒啥争議。而左右對齊也就是靠左或靠右。隻有行内元素在垂直對齊跟想像的可能有點出入。
2.1 行内元素是預設對齊頂部嗎
可以說是，也可以說不是。因為行内元素簡單來說也是按照自上而下自左而右排列的。但是呢，随便找一段文字都看得出來，文字的頂部是留有空隙的，每一行文字之間也是有空隙的。相對父元素，它是頂部對齊；相對内部文字，它是基線對齊。
2.2 文字的位置由什麼決定
明确的說，文字的位置由三個元素決定，分别是字号，行高，基線。
2.21 字号
字号越大，文字占的高度越大
2.22 行高
塊狀元素的行高就是高度，但是文字不一樣，文字是不占滿整個容器高度的，記得國小時用的作業本吧，四線三格。整個書寫行高度用四條線分成三份，行高指的是最頂到最底。
2.23 基線
上面說到的行高分成三份，有些文字隻用中間一份，比如x，a,c這些字母，有些占上面兩份，比如b,q;有些就占下面兩份，比如p,還有三份全占的。文字的占用規則自有其一套體系，咱們可以認為字母x占用空間的底部就是基線。同一行的行内元素預設的垂直對齊方式就是基線對齊。可以這樣了解，每行内假想一個字母x,後面出現的行内元素都是預設以自身基線對齊字母x的底部，然後上下延伸，最終行内最頂點到最底點就成為了整行的行高。
3. 執行個體
a x c b d p f 觀察高度 觀察高度
3.1 純文字
注意字母x底部位置
3.2 加入input
字母x與input的中心線是垂直對齊的，與input框内文字底部對齊，說明input的基線是x的底部。
3.2 令第一個input垂直對齊方式為bottom對齊
設定vertical-align: bottom;後，第一個input會尋找行内高度最大值的元素,然後底部與其對齊。
3.3 令第二個input垂直對齊方式為bottom對齊
設定vertical-align: bottom;後，第二個input會尋找行内高度最大值的元素，因為第一個input已經是底部對齊，是以兩個input元素都與文字的底部對齊了。
ps: input的預設屬性是inline-block,是具有塊狀元素和行内元素特性的，是以可以與行内元素在同一行，并且可以設定高度。
總結
對齊的原理是弄明白了，但是在開發中并不常用到行内元素的垂直對齊。真要涉及到對齊布局，用flex或者多套用幾個div要友善的多。不過，在現有項目上如果對齊出現了問題，可以參考這篇文章，分析問題出在哪裡。