又已經快十天沒有寫文章了，一周一篇其實好艱難的說……本來想接著上篇事件（上篇）總結事件型別的，可是看完之後整理下還是有點亂，就一直拖著沒寫……實在是不能再拖下去了，今天就簡單說說css中我們常用但又不一定真正了解的line-height屬性。
行高是指文字行基線間的垂直距離。那什麼是基線呢？記不記得vertical-align屬性有個baseline值，這個baseline就是基線。看張「盜圖」（選自下面的參考文章），其實我也修改了一下啦~
注意：倒數第二根是基線哦，最下面那根是底線，不是基線。
圖中兩條紅線之間的距離就是行高（line-height），上一行的底線和下一行的頂線之間的距離就是行距，而同一行頂線和底線之間的距離是font-size的大小，行距的一半是半行距，半行距、font-size、line-height之間的關係看的右下角就一目了然了~
半行距 = （line-height - font-size）/2
要說的4種盒子分別是inline box、line box、content area、containing box~
原諒我畫圖水平有限，不過仔細辨認還是能看出來的~ ^_^
一般情況下，瀏覽器預設的line-height為1.2。可以自定義 line-height 覆蓋這個初始值，那麼該怎樣設定line-height呢？有以下5種方式：值描述
normal
預設。設定合理的行間距。
number
設定數字，此數字會與當前的字型尺寸相乘來設定行間距，即number為當前font-size的倍數。
length
設定固定的行間距。
%基於當前字型尺寸的百分比行間距。
inherit
規定應該從父元素繼承 line-height 屬性的值。
看起來如此簡單~但是，line-height是個可繼承屬性，它的繼承規則有那麼一點點複雜……
需要提前說明的是：line-height的大小與font-size息息相關，除了指定line-height為多少px，剩下的設定方式都是基於font-size算出來的。 下面逐個講一講~
總結如下：
設定方式
line-height
計算後的line-height
子元素繼承的line-height
inherit
父元素的line-height值
不用計算
父元素的line-height值
length
20px
不用計算
20px
%120%
自身font-size (16px) * 120% = 19.2px
繼承父元素計算後的line-height值 19.2px，而不是120%
normal
1.2自身font-size (16px) * 1.2 = 19.2px
繼承1.2，line-height = 自身font-size(32px) * 1.2 = 38.4px
純數字1.5
自身font-size (16px) * 1.2 = 19.2px
繼承1.5，line-height = 自身font-size(32px) * 1.5 = 48px
那麼，哪一種是最好的方式呢？ 一般來數，設定行高的值為純數字是最推薦的方式，因為其會隨著對應的 font-size 而縮放。
這是對line-height的一點總結，歡迎小夥伴們拍磚哈~
mdn line-height
深入了解css的行高line height屬性
css行高——line-height
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到w3school 進行系統學習。學習css我使用的工具是visual css，可以實現同步預覽，快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式，避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到w3school 進行系統學習。學習css我使用的工具是visual css，可以實現同步預覽，快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式，避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS中Flex布局的學習筆記
最近，在學習一些前端知識。在學習的過程中發現會經常使用到flex布局，對這個知識點不太熟悉。因此，專門寫一篇文章來記錄一下學習歷程和心得。本文的內容參考了網上公開的資料，其中主要參考了這兩個 css flexible box layout module level 1和a complete guid...