資訊專欄INFORMATION COLUMN
摘要：整理一下關于行高的一些基本概念。行框的高度是這一行行內框的最高點到最低點的距離。所以在沒有設置固定高度的元素中，高度是由這個元素中所有行框高度疊加而成的。提示有種說法是行框的高度等于這一行中行內框中最大的，這種說法是錯誤的。
整理一下關于行高的一些基本概念。原文鏈接：http://www.zengkan.win/?p=84
1.定義每個文本行中可以看做有四條線：頂線，中線，基線和底線。類似英語作業本上的“四線三格”。如下圖（圖片來自@夢禪的文章）
line-height 行高就是指兩個文本行相同線之間的距離。同一行的頂線到底線的距離就是內容區域高度，內容區域的高度只與字體和字號有關，在有的字體(simsun等)中，字體大小等于內容區域高度。上一行的底線和下一行的頂線的距離是行間距。可以看出，行高 = 內容高度+行間距，當我們改變 line-height 的值時，內容高度是不變的，改變的只是行間距，從而改變了行高。
一個空元素的高度默認是0，而當這個元素中有內容時，元素就會被撐開，會有高度。之前我以為這個高度是文字的高度撐開的，而從@張鑫旭的文章中知道這個高度是由 line-height撐開的。以下代碼結果如下：
行高為1行高為默認
第一個 div 的行高為1像素，字體大小為20像素，最終高度為1像素；
第二個 div 行高為20像素，字體大小為0，最終高度是20像素。說明在沒有設置固定高度的元素中，高度并不是由文字撐開，具體高度是怎么產生的，先了解下面的幾個概念。
行內框 inline boxes ：行框下面的每一個標簽（包括文本標簽）都是一個多帶帶的行內框。行內框的高度由行高line-height決定。
行框line boxes ：每行文字都是一個行框，行框包含這一行行內框的最高點和最低點。行框的高度是這一行行內框的最高點到最低點的距離。The line box height is the distance between the uppermost box top and the lowermost box bottom.
包含盒子containing box：元素中行框的高度垂直疊加形成包含盒子的高度，也就是元素的高度。
所以在沒有設置固定高度的元素中，高度是由這個元素中所有行框高度疊加而成的。
提示： 有種說法是行框的高度等于這一行中行內框中最大的line-height，這種說法是錯誤的。
行內框1,行高30px行內框2,行高50px,
上述代碼結果如上圖，這個 div 中的行內框最大的行高是50像素，但由于這個行內框存在 vertical-align 偏差，所以這個行框的高度大于50像素。也就是行框的高度是這一行行內框的最高點到最低點的距離。
4.繼承line-height 屬性是可以繼承的，不過繼承規則因父元素的取值而異。具體如下表：
值得注意的是，父元素的 line-height 值設置為130%或1.3對本身來說是一樣的，但對于下面的子元素來說兩種設置方式的繼承規則不一樣，所以繼承到的行高也是有差別的。
上面圖片中，外面元素沒有設置height，由內容撐開，但是圖片下方默認會有一些間距。這個間距產生的原因：圖片和文字是同一個行框下的行內框，二者默認基線對齊，下面的邊距其實是基線和底線之間的距離。當父元素中只有圖片這一個元素時，也會有這個問題，可以看做是元素內部默認會有一個空白的文字節點。
解決辦法：
設置父元素 line-height 為0，基線和底線就會重合，間距就會消失。
圖片設置 vertical-aligh 為 bottom ，底線對齊。
圖片設置 display 為block，因為塊元素沒有vertical-align屬性，所以不存在基線對齊。
上面三種辦法中，1和3會影響父元素內的文字狀態，所以第二種辦法比較好。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115471.html
摘要：基本概念行高行距行高是指文本行基線間的垂直距離。行框行框是指本行的一個虛擬的矩形框，由該行中行內框組成。行框也是瀏覽器渲染模式中的一個概念，無法顯示出來。行框高度等于本行中所有行內框高度的最大值。設置合理的行間距。設置固定的行間距。 又已經快十天沒有寫文章了，一周一篇其實好艱難的說……本來想接著上篇事件（上篇）總結事件類型的，可是看完之后整理下還是有點亂，就一直拖著沒寫……實在是不能再...
摘要：上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護與破壞寫在前面在頁面布局中，內聯元素的垂直對齊是比較常見和基礎的布局需求，但是我們往往會因為垂直對齊中的，而頭疼不已。 上一篇：《CSS世界》筆記二：盒模型四大家族下一篇：《CSS世界》筆記四：流的保護與破壞 寫在前面 在頁面布局中，內聯元素的垂直對齊是比較常見和基礎的布局需求，但是我們往往會因為垂直對齊中的1px，2px而頭疼不已...
摘要：內聯盒子的高度由決定，限制包含盒子的高度，兩者一致，即把內聯盒子安放在包含盒子內，排除其他外界干擾。這時候由內聯盒子模型可知，行間距是等分的，中間部分是，達到看似居中的效果。可以得到結論和設置一致，并非是完全垂直，除非為。 張鑫旭的CSS深入理解之line-height學習筆記 line-height的定義 行高：兩行文字基線之間的距離 為何是基線：基線是定義所有字線的根本 不同字體...
摘要：理解字體和文本屬性，對于創造出專業水準的網頁排版非常重要。為字體和文本分別定義了屬性。字體屬性主要描述了一類字體的大小和外觀。還有一種新增的單位字體樣式值示例說明和都表示斜體英文中的斜體主要表示強調。字體粗細可能的值，或者和。 理解字體和文本屬性，對于創造出專業水準的網頁排版非常重要。一個網站的品質如何，有時候只要看看它用的字體就能一目了然。 1.網頁中字體的來源 用戶機...
摘要：在元素中使用元素是一個元素，沒有結束標記表示鏈入的是樣式表，在中可省略不寫。一般頁面中，中文用宋體黑體微軟雅黑，英文使用。英文字體要放在最前面，中文字體后面的備選字體用逗號隔開。表示方法可用像素指定或使用或百分數相對于字體大小指定。 一、基礎介紹 1， css：cascading style sheet 層疊式樣式表2， 語法：p {background-color:red...
閱讀 1402·2021-10-11 10:59
閱讀 3103·2019-08-30 15:54
閱讀 2724·2019-08-30 13:19
閱讀 2455·2019-08-30 13:02
閱讀 2371·2019-08-30 10:57
閱讀 3346·2019-08-29 15:40
閱讀 980·2019-08-29 15:39
閱讀 2299·2019-08-29 12:40
