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