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