資訊專欄INFORMATION COLUMN
摘要：初學(xué)者也許會對這句話嗤之以鼻，但隨著我學(xué)習(xí)的深入，漸漸意識這句話還是有一定道理的。然而，我們真的了解它嗎又是由什么來決定的首先推薦一篇文章，深入了解的行高屬性假設(shè)你已經(jīng)讀完了這篇文章并且已經(jīng)大致理解那么這張圖應(yīng)該能看懂了。
HTML和CSS因為其所見即所得的直觀特性，往往被冠上簡單易學(xué)的名號。我一開始也是這么想的，不就是那幾個控制浮動、顏色、位置的標(biāo)簽嗎！CSS3不就是加了些花哨的特效嗎！
記得哪位大大說過，前端開發(fā)里CSS是最難的。初學(xué)者也許會對這句話嗤之以鼻，但隨著我學(xué)習(xí)的深入，漸漸意識這句話還是有一定道理的。用三體里的一句話就是
方寸之間，深不見底啊
每一個簡單的屬性，都有你所不知的一面！今天就來說說這個line-height。我們在文章的排版中，經(jīng)常用到line-height這個屬性。然而，我們真的了解它嗎？line-height又是由什么來決定的？
首先推薦一篇文章，深入了解css的行高Line Height屬性
(假設(shè)你已經(jīng)讀完了這篇文章并且已經(jīng)大致理解)
那么這張圖應(yīng)該能看懂了。這個兩行的文字所包含的盒子，從里到外分別為：
content area(綠色字體所在的白色背景區(qū)域，邊框為綠色)
inline-boxes(content area加上其上下的黃色區(qū)域(半行間距),邊框也為綠色)
line-boxes(包裹在inline-boxes外部的盒子，邊框為紅色)
containing box(最外面的盒子，邊框為藍色)
其中l(wèi)ine-boxes的高度取決于其包含的inline-boxes中最高的那一個，例如本圖片中的斜體fish。
圖中的黃色部分分布在content area的上下，這就是半行間距。譬如我們設(shè)置
p{font-size:16px;line-height:20px;}
那么黃色部分(半行間距)就是(20-16)/2=2px，上一行和下一行的半行間距疊加為4px，再加上字體本身的16px，那行距就自然是20px了(嚴(yán)格來說，行距是上下兩行文字之間baseline的距離)
(未完)
參考資料
css行高line-height的一些深入理解及應(yīng)用
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/54346.html
摘要：初學(xué)者也許會對這句話嗤之以鼻，但隨著我學(xué)習(xí)的深入，漸漸意識這句話還是有一定道理的。然而，我們真的了解它嗎又是由什么來決定的首先推薦一篇文章，深入了解的行高屬性假設(shè)你已經(jīng)讀完了這篇文章并且已經(jīng)大致理解那么這張圖應(yīng)該能看懂了。 HTML和CSS因為其所見即所得的直觀特性，往往被冠上簡單易學(xué)的名號。我一開始也是這么想的，不就是那幾個控制浮動、顏色、位置的標(biāo)簽嗎！CSS3不就是加了些花哨的特效...
摘要：內(nèi)聯(lián)盒子的高度由決定，限制包含盒子的高度，兩者一致，即把內(nèi)聯(lián)盒子安放在包含盒子內(nèi)，排除其他外界干擾。這時候由內(nèi)聯(lián)盒子模型可知，行間距是等分的，中間部分是，達到看似居中的效果。可以得到結(jié)論和設(shè)置一致，并非是完全垂直，除非為。 張鑫旭的CSS深入理解之line-height學(xué)習(xí)筆記 line-height的定義 行高：兩行文字基線之間的距離 為何是基線：基線是定義所有字線的根本 不同字體...
摘要：下的屬性值詳解以下內(nèi)容均在中測試默認(rèn)對齊方式這里作為參考系，而它的就是所要對齊的了。沒有任何變化。那改變又如何呢為了讓的清晰可見，特意添加一個的包裹著。 前言 一直聽說line-height是指兩行文本的基線間的距離，然后又說行高等于行距，最近還聽說有個叫行間距的家伙，@張鑫旭還說line-height和vertical-align基情四射，貴圈真亂啊。。。。。。于是通過本篇來一探究竟...
摘要：但實質(zhì)上，只要是內(nèi)聯(lián)元素，這兩個元素都會同時在起作用。而解決方案可以有以下幾種元素不使用基線對齊，可以改為對齊元素塊狀化設(shè)置為設(shè)置為總結(jié)講解了的各類屬性值及其效果起作用的前提是內(nèi)聯(lián)元素與都是同時作用在內(nèi)聯(lián)元素上的 前言 vertical-align用來指定行內(nèi)元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。也就是說，對于塊級元素，vertical-align...
摘要：的應(yīng)用大部分時候，我們設(shè)置，都是為了垂直居中對齊。然后我們給設(shè)置，這樣我們就可以重置設(shè)置的，又因為保持了內(nèi)聯(lián)特性，因此我們可以設(shè)置以及產(chǎn)生，從而實現(xiàn)近似垂直居中對齊。 前言 行高，顧名思義是一行文字的高度，而從規(guī)范上來說則是兩行文字基線之間的距離。行高是作用在每一個行框盒子(line-box)上的，而行框盒子則是由內(nèi)聯(lián)盒子組成，因此，行高與內(nèi)聯(lián)元素可以說是非常緊密，行高直接決定了內(nèi)聯(lián)元...
閱讀 3452·2019-08-30 15:44
閱讀 797·2019-08-30 13:46
閱讀 2058·2019-08-30 11:05
閱讀 3332·2019-08-29 18:32
閱讀 2154·2019-08-29 13:56
閱讀 1296·2019-08-29 12:57
閱讀 756·2019-08-28 18:21
閱讀 1734·2019-08-26 12:16
