>[danger] vertical-align詳談 --- 行內元素垂直對齊方式 / 以哪條線進行對齊, 找到對齊的線就成功一半了 >[info] vertical-align的值范圍 ---  >[info]分類 * 線類: baseline (默認值), top, middle, bottom * 文本類: text-top, text-bottom * 上標下標類: sub, super * 數值百分比類, 10px, 1em, 5% >[info]針對 * 行內元素 (inline) * 行塊元素 (inline-block) * 內聯表格 (inline-table) (類似于table) * 表格單元格(table-cell) >[info] 線類圖解 ---- baseline:  middle值講解: 使文本垂直中線, 與基線對齊  紅色為基線baseline  * baseline: 文字底部, 如果沒有內容, 則是margin-bottom * -32px: 向下沉降32像素 * -100%: 相對于當前標簽line-height進行換算 * top: 與line-box頂端對齊 * bottom:與line-box低端對齊 * middle: 看上圖, 文字中線與基線對齊 * text-top: 當前元素頂端與父元素內容(最左側xx)的頂端 水平方向對齊 * text-bottom: 當前元素底部與父元素(最左側xx)的底部 水平方向對齊 * sub: 下沉當前標簽基線對齊 * super: 上浮當前標簽基線對齊  >[warning] 為什么vertical-align: middle; 就能對齊 --- 案例: logo 和 span 標簽, 想要以中線 水平對齊, 效果如下  解釋: inline box 的高度 由里面最高的行內元素來決定, 而且基線也要遷就與它 * 所以只給span: vertical-align: middle;并不能影響對齊方式. * 還需要給最高的圖片設置 vertical-align: middle; 才可以 >[warning] 什么時候不好用了 ---- 標簽設置了以下屬性 * float * position: absolute / fixed * 父級開啟了彈性盒子