line-height深入理解
阿新 • • 發佈：2018-03-23
時也 說明 會有 垂直居中 htm 如果 理解 bsp 開始 “行高”顧名思意指一行文字的高度。具體來說是指兩行文字間基線之間的距離。基線實在英文字母中用到的一個概念，我們剛學英語的時使用的那個英語本子每行有四條線，其中底部第二條線就是基線，是a,c,z,x等字母的底邊線。下圖的紅色線即為基線。
line-height與line boxes高度
css中起高度作用的應該就是height以及line-height了吧！如果一個標簽沒有定義height屬性(包括百分比高度)，那麽其最終表現的高度一定是由line-height起作用，即使是IE6下11像素左右默認高度bug也是如此。<div></div>，如果沒有設置至少大於1像素高度height值時，該div的高度就是個0。如果該div裏面打入了一個空格或是文字，則此div就會有一個高度。那麽您思考過沒有，為什麽div裏面有文字後就會有高度呢？
可能有人會跟認為是：文字撐開的！文字占據空間，自然將div撐開。我一開始也是這樣理解的，但是事實上，深入理解inline模型後，我發現，根本不是文字撐開了div的高度，而是line-height！要證明很簡單(如下測試代碼)：
結果是如此的顯而易見，test1 div有文字大小，但行高為0，結果div的高度就是個0；test2 div文字大小為0，但是有行高，為20像素，結果div高度就是20像素。這就說明撐開div高度的是line-height不是文字內容。line-height行高怎麽就產生了高度呢？
在inline box模型中，有個line boxes，這玩意是看不見的，這個玩意的工作就是包裹每行文字。一行文字一個line boxes。例如“艾佛森退役”這5個字，如果它們在一行顯示，你艾佛森再牛逼，對不起，只有一個line boxes罩著你；但“春哥純爺們”這5個字，要是豎著寫，一行一個，那真是夠爺們，一個字罩著一個line boxes，於是總計五個line boxes。line boxes什麽特性也沒有，就高度。所以一個沒有設置height屬性的div的高度就是由一個一個line boxes的高度堆積而成的。
其實line boxes不是直接的生產者，屬於中層幹部，真正的活兒都是它的手下 – inline boxes幹的，這些手下就是文字啦，圖片啊，span之類的inline屬性的標簽啦。line boxes只是個考察匯報人員，考察它的手下誰的實際line-height值最高，誰最高，它就要誰的值，然後向上匯報，形成高度。例如，<span style="line-height:20px;">取手下line-height<span style="line-height:40px;">最高</span>的值</span>。則line boxes的高度就是40像素了。
line-height與line boxes高度
css中起高度作用的應該就是height以及line-height了吧！如果一個標簽沒有定義height屬性(包括百分比高度)，那麽其最終表現的高度一定是由line-height起作用，即使是IE6下11像素左右默認高度bug也是如此。<div></div>，如果沒有設置至少大於1像素高度height值時，該div的高度就是個0。如果該div裏面打入了一個空格或是文字，則此div就會有一個高度。那麽您思考過沒有，為什麽div裏面有文字後就會有高度呢？
可能有人會跟認為是：文字撐開的！文字占據空間，自然將div撐開。我一開始也是這樣理解的，但是事實上，深入理解inline模型後，我發現，根本不是文字撐開了div的高度，而是line-height！要證明很簡單(如下測試代碼)：
line-height行高怎麽就產生了高度呢？
在inline box模型中，有個line boxes，這玩意是看不見的，這個玩意的工作就是包裹每行文字。一行文字一個line boxes。例如“艾佛森退役”這5個字，如果它們在一行顯示，你艾佛森再牛逼，對不起，只有一個line boxes罩著你；但“春哥純爺們”這5個字，要是豎著寫，一行一個，那真是夠爺們，一個字罩著一個line boxes，於是總計五個line boxes。line boxes什麽特性也沒有，就高度。所以一個沒有設置height屬性的div的高度就是由一個一個line boxes的高度堆積而成的。其實line boxes不是直接的生產者，屬於中層幹部，真正的活兒都是它的手下 – inline boxes幹的，這些手下就是文字啦，圖片啊，span之類的inline屬性的標簽啦。line boxes只是個考察匯報人員，考察它的手下誰的實際line-height值最高，誰最高，它就要誰的值，然後向上匯報，形成高度。例如，<span style="line-height:20px;">取手下line-height<span style="line-height:40px;">最高</span>的值</span>。則line boxes的高度就是40像素了。
line-height的垂直居中性
行高還有一個特性，叫做垂直居中性。line-height的最終表現是通過line boxes實現的，而無論line boxes所占據的高度是多少（無論比文字大還是比文字小），其占據的空間都是與文字內容共用水平中垂線的。還拿上面這張圖來說吧。 綠色背景的高度實際是由line-height 撐開的，如果綠色背景中有文字，那麽文字的水平中垂線同時也會平分綠色背景的高度；應用
- 單行文本垂直居中
- 多行文字的垂直居中
line-height深入理解