line-height理解

行高的單位

百分比:突出了行高和字體大小的基佬關係當字體行高的單位爲百分比的時候,行高以字體大小爲依據

em:em這個單位,當作用在行高的時候是以當前文字大小爲依據,當作用在字體大小的時候是以當前元素的父元素的字體大小爲依據

行高的組成部分

行距+實際高度(不同字體和字體大小組成的高度)

實際高度

組成部分:

由4根線組成:上線 主線(median) 基線(baseline) 下線

(維基官網圖)

行距

1.行距就是當行高的大小設置高於了字體大小可以形成的高度的時候其餘高度就會自動向兩邊平分,也就是爲什麼內聯元素可以看上去垂直居中的原因

2.行距是根據line-height和實際高度差自動產生的,也就是爲什麼css可以設置字體間距大小(letter-spacing),而沒有行高大小的樣式

拓展

ex

ex的單位的由來,就是x-height的高度(就是基線和主線的中間的距離 ---->維基百科)

基線

就是上圖中的哪個紅線

作用:就是內聯元素的底部對其方式 ---> 瀏覽器默認vertical-align:baseline 基線對齊

如何判斷基線?

一個inline-block元素,如果裏面沒有inline內聯元素,或者overflow不是visible,則該元素的基線就是其margin底邊緣,否則,其基線就是元素裏面最後一行內聯元素的基線。 ----> 旭哥總結的

原文:https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

基線帶來的問題?

空白節點

在HTML5文檔聲明下,塊狀元素內部的內聯元素的行爲表現,就好像塊狀元素內部還有一個(更有可能兩個-前後)看不見摸不着沒有寬度沒有實體的空白節點,這個假想又似乎存在的空白節點,我稱之爲“幽靈空白節點”。 -- 旭哥

我上文的理解就是其實我們寫html的時候回車和空格在其實和文本一樣都是文本節點,這一點在js中有提現,所以其實,我們寫html,或者瀏覽器最後渲染的時候會有回車,所以導致了這個空白節點

原文:https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

所以下面的例子我們在一個內聯元素後面加一些文字來模擬這些空白節點

 無論我html裏有沒有寫這個回車,最後渲染在瀏覽器上就是有這個回車

  <div class="container">
    <div class="line-box"></div>
    <span>我來測試--> 空白節點</span>
  </div>


    .container {
      border: 1px solid red;
    }

    .line-box {
      display: inline-block;
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }

例子反應的問題

1. 出現了空白節點

2.證明了一個inline-block元素,如果裏面沒有inline內聯元素,或者overflow不是visible,則該元素的基線就是其margin底邊緣,這裏的line-box裏面沒元素,那麼他的基線就是margin底邊緣

3.由span背景圖可以看出多出來的空白節點就是基線和下線的距離和行距的下部分的距離

 解決方法:

  1.  不讓其基線對象,就設置爲block元素那麼他就不會基線對象
  2.  改變行高,設置當行高爲0, 那麼基線和主線(等其他線)都層疊到中間了,4條線都都向中間移動,4條線統一變爲一根線(也就是基線和主線的中間),故而基線和下線的距離就爲0,所以就沒了給空白的距離
  3.  改變行高,還有就是設置字體大小爲0,默認line-height:1.2 是以文字大小的百分比來計算的,如果文字大小爲0,那麼行高就爲0

    (個人喜好是設置font-size:0, 給我的感覺就像瀏覽器少了一步先設置默認line-height的高度我們在吧他改爲0的這一步,而在直接跟不上設置font-siez:爲0,個人看法,歡迎更正)

行高的作用(line-height)

撐開高度

爲什麼?

可用這樣理解block box (塊盒子)的高度在是由line box(行盒子) 影響的,而line box的是由line boxes(這個玩意的工作就是包裹每行文字)決定的,當我們在一個div中寫一個span在我們沒有對這個div設置高度的情況下,這個div的高度就是由span這個line box(行盒子)決定的,而內聯元素的高度由line-height決定了,所以這個line-height間距的撐開了div的高度

inline boxes (這些手下就是文字啦,圖片啊,<span>之類的inline屬性的標籤啦)

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章