深入理解line-height

chemzqm 發布于2019-08-30 13:04 / 1033人閱讀

摘要：初學者也許會對這句話嗤之以鼻，但隨著我學習的深入，漸漸意識這句話還是有一定道理的。然而，我們真的了解它嗎又是由什么來決定的首先推薦一篇文章，深入了解的行高屬性假設你已經讀完了這篇文章并且已經大致理解那么這張圖應該能看懂了。

HTML和CSS因為其所見即所得的直觀特性，往往被冠上簡單易學的名號。我一開始也是這么想的，不就是那幾個控制浮動、顏色、位置的標簽嗎！CSS3不就是加了些花哨的特效嗎！
記得哪位大大說過，前端開發里CSS是最難的。初學者也許會對這句話嗤之以鼻，但隨著我學習的深入，漸漸意識這句話還是有一定道理的。用三體里的一句話就是

方寸之間，深不見底啊

每一個簡單的屬性，都有你所不知的一面！今天就來說說這個line-height。我們在文章的排版中，經常用到line-height這個屬性。然而，我們真的了解它嗎？line-height又是由什么來決定的？
首先推薦一篇文章，深入了解css的行高Line Height屬性
(假設你已經讀完了這篇文章并且已經大致理解)

那么這張圖應該能看懂了。這個兩行的文字所包含的盒子，從里到外分別為：

content area(綠色字體所在的白色背景區域，邊框為綠色)

inline-boxes(content area加上其上下的黃色區域(半行間距),邊框也為綠色)

line-boxes(包裹在inline-boxes外部的盒子，邊框為紅色)

containing box(最外面的盒子，邊框為藍色)

其中line-boxes的高度取決于其包含的inline-boxes中最高的那一個，例如本圖片中的斜體fish。

圖中的黃色部分分布在content area的上下，這就是半行間距。譬如我們設置

p{font-size:16px;line-height:20px;}

那么黃色部分(半行間距)就是(20-16)/2=2px，上一行和下一行的半行間距疊加為4px，再加上字體本身的16px，那行距就自然是20px了(嚴格來說，行距是上下兩行文字之間baseline的距離)

(未完)

參考資料
css行高line-height的一些深入理解及應用

GPU云服務器云服務器深入理解系列深入理解linux 深入理解webrtc 深入理解python

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115284.html

深入理解line-height

摘要：初學者也許會對這句話嗤之以鼻，但隨著我學習的深入，漸漸意識這句話還是有一定道理的。然而，我們真的了解它嗎又是由什么來決定的首先推薦一篇文章，深入了解的行高屬性假設你已經讀完了這篇文章并且已經大致理解那么這張圖應該能看懂了。 HTML和CSS因為其所見即所得的直觀特性，往往被冠上簡單易學的名號。我一開始也是這么想的，不就是那幾個控制浮動、顏色、位置的標簽嗎！CSS3不就是加了些花哨的特效...

Java3y 2019-08-02 15:55 評論0 收藏0
【學習筆記】CSS深入理解之line-height

摘要：內聯盒子的高度由決定，限制包含盒子的高度，兩者一致，即把內聯盒子安放在包含盒子內，排除其他外界干擾。這時候由內聯盒子模型可知，行間距是等分的，中間部分是，達到看似居中的效果。可以得到結論和設置一致，并非是完全垂直，除非為。張鑫旭的CSS深入理解之line-height學習筆記 line-height的定義行高：兩行文字基線之間的距離為何是基線：基線是定義所有字線的根本不同字體...

Stardustsky 2019-08-30 15:54 評論0 收藏0
CSS魔法堂：深入理解line-height和vertical-align

摘要：下的屬性值詳解以下內容均在中測試默認對齊方式這里作為參考系，而它的就是所要對齊的了。沒有任何變化。那改變又如何呢為了讓的清晰可見，特意添加一個的包裹著。前言一直聽說line-height是指兩行文本的基線間的距離，然后又說行高等于行距，最近還聽說有個叫行間距的家伙，@張鑫旭還說line-height和vertical-align基情四射，貴圈真亂啊。。。。。。于是通過本篇來一探究竟...

avwu 2019-08-30 12:52 評論0 收藏0
深入理解css之vertical-align

摘要：但實質上，只要是內聯元素，這兩個元素都會同時在起作用。而解決方案可以有以下幾種元素不使用基線對齊，可以改為對齊元素塊狀化設置為設置為總結講解了的各類屬性值及其效果起作用的前提是內聯元素與都是同時作用在內聯元素上的前言 vertical-align用來指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。也就是說，對于塊級元素，vertical-align...

cgh1999520 2019-08-30 15:53 評論0 收藏0
深入理解css之line-height

摘要：的應用大部分時候，我們設置，都是為了垂直居中對齊。然后我們給設置，這樣我們就可以重置設置的，又因為保持了內聯特性，因此我們可以設置以及產生，從而實現近似垂直居中對齊。前言行高，顧名思義是一行文字的高度，而從規范上來說則是兩行文字基線之間的距離。行高是作用在每一個行框盒子(line-box)上的，而行框盒子則是由內聯盒子組成，因此，行高與內聯元素可以說是非常緊密，行高直接決定了內聯元...

miya 2019-08-29 15:25 評論0 收藏0