1.背景介紹
隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展逼友，人們對網(wǎng)頁的要求已經(jīng)不限于傳遞信息，如何將網(wǎng)頁設(shè)計(jì)的更合理司抱，能更容易的讓用戶獲取信息也愈發(fā)重要。而文字作為網(wǎng)頁信息的主要載體习柠，
它的樣式對用戶交互的影響十分巨大，本次小課堂將跟大家分享兩個關(guān)于文字樣式的標(biāo)簽：line-height和vertical-align资溃。
2.知識剖析
1.line-height基本概念
定義：行高是指文本行基線baseline之間的垂直距離
1.1 line-height屬性可賦值
<設(shè)置固定長度(px,rem等固定單位)
設(shè)置數(shù)字:設(shè)置數(shù)字，此數(shù)字會與當(dāng)前的字體尺寸相乘來設(shè)置行間距宝恶。
設(shè)置百分比:基于當(dāng)前字體尺寸的百分比行距
注意：數(shù)字可以直接被繼承，然后在計(jì)算行高趴捅，而百分比是先計(jì)算出行高垫毙，在以px繼承
2.vertical-align基本概念與應(yīng)用
定義：使行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊
默認(rèn)值baseline:元素基線與父元素基線對齊
眾所周知拱绑，vertical-align支持很多屬性值；(關(guān)鍵字值:vertical-align等等: middle;長度值：vertical-align: 4px等等膀藐；百分比值：vertical-align: 10%...等等)
注意：vertical-align的百分比值不是相對于字體大小或者其他什么屬性計(jì)算的，而是相對于line-height計(jì)算的消请。
3.常見問題
為什么在div內(nèi)插入圖片类腮，會發(fā)現(xiàn)圖片下面有一段空白間隙？
4.解決方案
1,圖片默認(rèn)是inline水平的蚜枢，而vertical-align對塊狀水平的元素?zé)o感。因此需频，我們只要讓圖片display水平為block就可以了，我們可以直接設(shè)置display或者浮動昭殉、絕對定位等
2,直接修改line-height值
5.編碼實(shí)戰(zhàn)
6.拓展思考
都用什么方法可以實(shí)現(xiàn)垂直居中藐守？
1.想要讓單行文字垂直居中居中，可以使用剛剛講到的line-height屬性
2.使用剛剛講到的vertical-align屬性實(shí)現(xiàn)居中
3.使用盒子模型
4.使用table布局
把一些 div 的顯示方式設(shè)置為表格卢厂，因此我們可以使用表格的 vertical-align property 屬性。
5.使用flex彈性布局
設(shè)置父元素display:flex任内，使用align-items:center
6.使用絕對定位
絕對定位后設(shè)置top和left為50%，然后縱向變化50%的自身高度
7.參考文獻(xiàn)
參考一：MDN
參考二：深入理解line-height與vertical-align
參考三：對CSS vertical-align的一些理解與認(rèn)識（一）
8.更多討論
為什么我的vertical-align屬性不起作用死嗦？
我們知道了vertical-align是垂直對齊的意思，不少經(jīng)驗(yàn)尚淺的同行會試著使用這個屬性實(shí)現(xiàn)一些垂直方向上的對齊效果棚品，
會發(fā)現(xiàn)有時候可以廊敌，有時候又不起作用，不知道為什么骡澈？因?yàn)橹挥幸粋€元素屬于inline或是inline-block（table-cell也可以理解為inline-block水平）水平掷空，其身上的vertical-align屬性才會起作用。
