淺談line-height

基礎知識

有4種模型，分別是

• 塊，塊盒模型 containing boxing,包括line

• 行內盒模型 inline boxing ,包含content

• 行模型 line boxing,包含inline,line高度是由最高的inline元素決定.

• 內容區域 content area

這部份內容能夠着重看 這裏有詳細的介紹。

line-height與line boxes高度

由上面的內容能夠總結出line boxes 的高度取決與其下屬的inline boxes 中最高的元素。

對於像input這樣的元素,在不一樣瀏覽器上line-height屬性表現是不一樣,參考Line-Height Doesn’t Work As Expected On Inputs

垂直居中的特性

行高還有一個特性，叫作垂直居中性。line-height的最終表現是經過line boxes實現的，而不管line boxes所佔據的高度是多少（不管比文字大仍是比文字小），其佔據的空間都是與文字內容公用水平中垂線的。 ----張鑫旭的博文

咱們常常看到一種垂直居中的方法,那就是讓height和line-height 相同

text-vertical{
        height:30px;
        line-height:30px;
    }

其實在這裏起做用的是line-height , 只要設置好了line-height ,在不設置height 的狀況下一個div 的高度就是他的line-height 的值

結果如圖:在chrome的測試下

line-height與line boxes高度 by wangjojo (@wweggplant) on CodePen.

多行文字垂直居中

在看了張鑫旭大神的博文後, 發現不使用最後的i標籤也是能夠作到垂直居中的,多是他當時寫那篇文章的時間過久,瀏覽器的更新問題等, 在最新版本的測試下,沒必要使用i標籤,只使用line-height 就能解決問題,若是發現舊瀏覽器不支持,能夠採用他博客中提到的方法.

多行文字居中,添加i方式 by wangjojo (@wweggplant) on CodePen.

行高在文章中的應用

line-height賦值方式px/em、百分值、normal、數值、inherit繼承。px/em和inherit沒什麼好說的, normal與數值1.2等價 ,因此下面重點說說百分比和數值兩種賦值方式的區別.

line-height百分比

line-height百分比賦值的結果是當前line-height的值乘以這個百分比數值獲得的.demo以下:

line-height賦值方式 by wangjojo (@wweggplant) on CodePen.

外層的 div.wrap 的 line-height 計算結果是 20px*150% = 24px;

內部的h1標籤和 p標籤的經過繼承獲得 line-height:150% 而後最後的結果仍然是24px

在line-height採用百分比的狀況下,line-height的最終值h就是當前line-height乘以這個百分比計算得出.而且這個值會繼承下去,後代的元素繼承獲得的值也是h

line-height純數值

外層的 div.wrap-line-height-number 的 line-height 計算結果是 30px*1.5 = 45px;

內部的h1標籤和 p標籤的經過繼承獲得 line-height:1.5

h1的line-height是 16px*1.5 = 24px

p 的line-height是 12px*1.5 = 16px

能夠把line-height採用數值形式看成一種倍數的繼承, 後代的元素都會繼承這個倍數,並受這幾數值的影響,獲得最後的值

line-height與vertical-align關係(有空再寫)

總結

1. 4種box模型以及各自的含義

2. line-height與line box的關係

3. 文字垂直居中

4. line-height賦值形式採用數值或者是百分比時各自的表明的含義

參考

• 深刻了解css的行高Line Height屬性——沁園春

• css行高line-height的一些深刻理解及應用——張鑫旭