資訊專欄INFORMATION COLUMN
摘要：基本概念行高行距行高是指文本行基線間的垂直距離。行框行框是指本行的一個(gè)虛擬的矩形框，由該行中行內(nèi)框組成。行框也是瀏覽器渲染模式中的一個(gè)概念，無法顯示出來。行框高度等于本行中所有行內(nèi)框高度的最大值。設(shè)置合理的行間距。設(shè)置固定的行間距。
又已經(jīng)快十天沒有寫文章了，一周一篇其實(shí)好艱難的說……本來想接著上篇事件（上篇）總結(jié)事件類型的，可是看完之后整理下還是有點(diǎn)亂，就一直拖著沒寫……實(shí)在是不能再拖下去了，今天就簡單說說CSS中我們常用但又不一定真正了解的line-height屬性。
基本概念 行高、行距行高是指文本行基線間的垂直距離。那什么是基線呢？記不記得vertical-align屬性有個(gè)baseline值，這個(gè)baseline就是基線。看張“盜圖”（選自下面的參考文章），其實(shí)我也修改了一下啦~
注意：倒數(shù)第二根是基線哦，最下面那根是底線，不是基線。
圖中兩條紅線之間的距離就是行高（line-height），上一行的底線和下一行的頂線之間的距離就是行距，而同一行頂線和底線之間的距離是font-size的大小，行距的一半是半行距，半行距、font-size、line-height之間的關(guān)系看圖片的右下角就一目了然了~
半行距 = （line-height - font-size）/2
當(dāng)然，半行距也可能為負(fù)值（當(dāng)line-height < font-size），這時(shí)候兩行之間就會(huì)重疊，如下圖所示：
4種box要說的4種盒子分別是inline box、line box、content area、containing box ~
inline box (行內(nèi)框) 每個(gè)行內(nèi)元素會(huì)生成一個(gè)行內(nèi)框，行內(nèi)框是一個(gè)瀏覽器渲染模型中的一個(gè)概念，無法顯示出來，行內(nèi)框的高度等于font-size，設(shè)定line-height時(shí)，行內(nèi)框的高度不變，改變的是行距。
line box （行框） 行框是指本行的一個(gè)虛擬的矩形框，由該行中行內(nèi)框組成。行框也是瀏覽器渲染模式中的一個(gè)概念，無法顯示出來。行框高度等于本行中所有行內(nèi)框高度的最大值。當(dāng)有多行內(nèi)容時(shí)，每一行都有自己的行框。
content area （內(nèi)容區(qū)） 內(nèi)容區(qū)是圍繞著文字的一種box，無法顯示出來，其高度取決于font-size和padding。個(gè)人覺得：內(nèi)容區(qū)的高度 = font-size + padding-top + padding-bottom，有待查證，也期待小伙伴們給出答案~
containing box containing box 是包裹著上述三種box的box，有點(diǎn)繞哈~看圖
原諒我畫圖水平有限，不過仔細(xì)辨認(rèn)還是能看出來的~ ^_^
取值一般情況下，瀏覽器默認(rèn)的line-height為1.2?？梢宰远x line-height 覆蓋這個(gè)初始值，那么該怎樣設(shè)置line-height呢？有以下5種方式：
| 值 | 描述 |
|---|---|
| normal | 默認(rèn)。設(shè)置合理的行間距。 |
| number | 設(shè)置數(shù)字，此數(shù)字會(huì)與當(dāng)前的字體尺寸相乘來設(shè)置行間距，即number為當(dāng)前font-size的倍數(shù)。 |
| length | 設(shè)置固定的行間距。 |
| % | 基于當(dāng)前字體尺寸的百分比行間距。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 line-height 屬性的值。 |
看起來如此簡單~但是，line-height是個(gè)可繼承屬性，它的繼承規(guī)則有那么一點(diǎn)點(diǎn)復(fù)雜……
繼承需要提前說明的是：line-height的大小與font-size息息相關(guān)，除了指定line-height為多少px，剩下的設(shè)置方式都是基于font-size算出來的。 下面逐個(gè)講一講~
inherit 這個(gè)其實(shí)沒什么說的，繼承父元素line-height的值，所以父元素的是多少就是多少。 如果其后代元素不設(shè)置line-height 的話，也會(huì)是這個(gè)值。
length 假設(shè)設(shè)置 line-height 為20px，那么該行的該行的行高就是20px，與 font-size 無關(guān)，不會(huì)隨著 font-size 做相應(yīng)比例的縮放。 這個(gè)長度值（20px）會(huì)被后代元素繼承，所有的后代元素會(huì)使用這個(gè)相同的、繼承的 line-height (20px)，除非后代元素設(shè)定 line-height 。
百分比 假設(shè)自身的 font-size 為16px，line-height 設(shè)為120%。那么其行高為：16 * 120% = 19.2px。即 line-height 是根據(jù)自身的 font-size 計(jì)算出來的。 子元素會(huì)繼承父元素的line-height，那么它繼承的是什么呢，百分比（120%）？還是19.2px？ 答案是后者，19.2px，即父元素line-height計(jì)算后的最終值。
normal line-height 設(shè)置為 normal 的時(shí)候，行高取決于瀏覽器的解析，一般是1.2。 與前面不同的是，line-height 設(shè)置為 normal 的元素，其子元素不再繼承其line-height計(jì)算后的最終值，而是根據(jù)子元素自身的 font-size 進(jìn)行計(jì)算。見下表~
| element | font-size | line-height | 計(jì)算后的lline-height |
|---|---|---|---|
| body | 16px | normal | 16px * 1.2 = 19.2px |
| h1 | 32px | normal | 32px * 1.2 = 38.4px |
可見，子元素隨著自身 font-size 的大小而做相應(yīng)比例的縮放。
純數(shù)字 如果既想要 normal 的靈活，又想設(shè)置一個(gè)自定義的值，那就要用 純數(shù)字 啦~ 純數(shù)字方式與 normal 唯一的不同，就是數(shù)值的大小，純數(shù)字可以自己隨意設(shè)定，而 normal 的值是瀏覽器決定的。
| element | font-size | line-height | 計(jì)算后的lline-height |
|---|---|---|---|
| body | 16px | 1.5 | 16px * 1.5 = 24px |
| h1 | 32px | 1.5 | 32px * 1.5 = 48px |
其后代元素會(huì)繼承這個(gè)數(shù)值（比如 1.5），然后根據(jù)自身的 font-size 算出自身的line-height。
總結(jié)如下：
| 設(shè)置方式 | line-height | 計(jì)算后的line-height | 子元素繼承的line-height |
|---|---|---|---|
| inherit | 父元素的line-height值 | 不用計(jì)算 | 父元素的line-height值 |
| length | 20px | 不用計(jì)算 | 20px |
| % | 120% | 自身font-size (16px) * 120% = 19.2px | 繼承父元素計(jì)算后的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 |
| 純數(shù)字 | 1.5 | 自身font-size (16px) * 1.2 = 19.2px | 繼承1.5，line-height = 自身font-size(32px) * 1.5 = 48px |
那么，哪一種是最好的方式呢？ 一般來數(shù)，設(shè)置行高的值為 純數(shù)字 是最推薦的方式，因?yàn)槠鋾?huì)隨著對應(yīng)的 font-size 而縮放。
這是對line-height的一點(diǎn)總結(jié)，歡迎小伙伴們拍磚哈~
參考MDN line-height
深入了解css的行高Line Height屬性
CSS行高——line-height
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111103.html
摘要：內(nèi)聯(lián)盒子的高度由決定，限制包含盒子的高度，兩者一致，即把內(nèi)聯(lián)盒子安放在包含盒子內(nèi)，排除其他外界干擾。這時(shí)候由內(nèi)聯(lián)盒子模型可知，行間距是等分的，中間部分是，達(dá)到看似居中的效果。可以得到結(jié)論和設(shè)置一致，并非是完全垂直，除非為。 張鑫旭的CSS深入理解之line-height學(xué)習(xí)筆記 line-height的定義 行高：兩行文字基線之間的距離 為何是基線：基線是定義所有字線的根本 不同字體...
摘要：前言之前在寫網(wǎng)頁的時(shí)候有一個(gè)展示圖片的需求我使用一個(gè)包裹一個(gè)但是在瀏覽器中預(yù)覽的時(shí)候碰到了一下的問題仔細(xì)看圖片和之間有間隙。正文指定了行內(nèi)元素或表格單元格元素的垂直對齊方式摘錄自。設(shè)置父元素字體大小為所用的值是無單位數(shù)值乘以元素的。 前言 之前在寫網(wǎng)頁的時(shí)候有一個(gè)展示圖片的需求,我使用一個(gè)div包裹一個(gè)img,但是在瀏覽器中預(yù)覽的時(shí)候碰到了一下的問題,showImg(https://s...
摘要：在元素中使用元素是一個(gè)元素，沒有結(jié)束標(biāo)記表示鏈入的是樣式表，在中可省略不寫。一般頁面中，中文用宋體黑體微軟雅黑，英文使用。英文字體要放在最前面，中文字體后面的備選字體用逗號隔開。表示方法可用像素指定或使用或百分?jǐn)?shù)相對于字體大小指定。 一、基礎(chǔ)介紹 1， css：cascading style sheet 層疊式樣式表2， 語法：p {background-color:red...
摘要：前言布局中經(jīng)常會(huì)遇到元素水平居中的需求今天根據(jù)以前的學(xué)習(xí)筆記以及看過的一些技術(shù)博客做個(gè)元素水平居中的小結(jié)。文字的水平垂直居中文字水平居中文字的水平垂直居中在于同高然后。 前言 布局中經(jīng)常會(huì)遇到元素水平居中的需求,今天根據(jù)以前的學(xué)習(xí)筆記?以及看過的一些技術(shù)博客做個(gè)元素水平居中的小結(jié)。 正文 圖片的水平垂直居中 //圖片地址為http://static.jsbin.com/ima...
閱讀 2320·2021-11-15 11:38
閱讀 2450·2021-11-15 11:37
閱讀 2554·2021-08-24 10:00
閱讀 2915·2019-08-30 15:56
閱讀 1271·2019-08-30 15:53
閱讀 3709·2019-08-29 18:43
閱讀 2938·2019-08-29 17:01
閱讀 3262·2019-08-29 16:25
