line-height系列——定義和工作原理總結

標籤：模型   mic   orm   play   color   比例   垂直置中   字型大小   技術   

一、line-height的定義和工作原理總結 line-height的屬性值:

• normal    預設  設定合理的行間距。
• number  設定數字，此數字會與當前的字型尺寸相乘來設定行間距line-height:1.5;
• length    設定固定的行間距。  例如：line-height:18px;
• %          基於當前字型尺寸的百分比行間距。 例如：line-height:150%;

 line-height 的定義：首先認識下文字的四條線從上到下四條線分別是頂線、中線、基準、底線.其中vertical-align中屬性有top、middle、baseline、bottom與四條線相關。  行高：指一行文字的高度。具體來說是指兩行文字間基準之間的距離。 line-height的工作原理：內聯格式模型（inline formatting model）contain box 內容區主要是靠字型大小撐起來 inline box    行內框只是一個概念，它無法顯示出來，但是它又確實存在。在沒有其他因素影響的時候，行內框等於內容地區，而設定行高則可以增加或者減少行內框的高度，即：將行距的值（行高-字型尺寸）除以2，分別增加到內容地區的上下兩邊 line box     行框是指本行的一個虛擬矩形框，有文章說其高度等於本行內所有元素中行高最大的值如，當我更認可這樣的解釋：它的上下邊界分別是行內所有inline-box的最高點和最低點。如：這兩個的區別在於，前者的行內框都是用span,後者用的是div。（都設定display:inline-block）說明對於兄弟元素而言，行內元素是中垂線對齊，而區塊層級元素更接近底線對齊。  參考文章：  詳細介紹：行高：line-height屬性 更深入介紹：CSS內聯格式化模式（line-height原理）

 

行高的特性：

垂直置中性  line-height的最終表現是通過inline box實現的，而無論inline box所佔據的高度是多少（無論比文字大還是比文字小），其佔據的空間都是與文字內容公用水平中垂線的。這一重要的特性可以用來實現文字或圖片的垂直置中對齊。  行高的繼承性：行高設定為具體數值（px/em）、百分比（%）會使用對父元素的font-size計算過後具體的數值繼承下去。normal 可以根據子項目不同的font-size值進行計算，但瀏覽器在解釋normal的縮放比例時有細微差異。最好的方案：純數字 如：1.5。使用的是基於子項目font-size計算出來的line-height。  參考文獻：深入瞭解css的行高Line Height屬性  注意事項：瀏覽器預設會給文字設定line-height。不同瀏覽器不同設定。一般會reset.css裡重新設定line-height，所以在布局時遇到文字要記得設定的line-height是否符合或重設  2017-01-19

line-height系列——定義和工作原理總結