css 裏的行高

#環境 chrome瀏覽器

#行高屬性

行高屬性裏有4種：

1. normal
2. number
3. percent
4. inherit

這裏主要講第三種，percent ：line-height: 100%

#通常狀況

css文件裏有如下定義

p {
    font-size: 18px;
    line-height:100%;
}

html裏的內容是：

<p>
    first line<br>
    second line<br>
</p>

行高定義爲100%，也就是font-size的100%，計算下來，每行的高度是18px，2行總共高36px

#非通常狀況1

首先css文件（增長了span）

p {
    font-size: 18px;
    line-height:100%;
}
span {
    font-size: 66px;
}

html文件（增長了span）

<p>
    first line<br>
    <span>second line</span><br>
</p>

雖然行高仍是100%，那第一行的高度仍是18px，而第二行的高度就變成了34px
34是如何算出來的？答案是：（2×18+66）/3=34，其中數字2和3是固定搭配，而18和66就是取自當時實際的數字
因此，若是66變爲99的時候，第二行的高度還會跟着改大

#非通常狀況2

一個是18和66,對應的行高一個是18和34,34-18=16,請記住16這個數字

仍是上代碼首先css文件（100%變成了200%）

p {
    font-size: 18px;
    line-height:200%;
}
span {
    font-size: 66px;
}

html文件

<p>
    first line<br>
    <span>second line</span><br>
</p>

這個時候行高會怎麼變呢？
第一行，由原來的18px的高度翻了個倍，變成了36px，這很好理解
而二行，高度變成了52px，怎麼得來的呢？是36+16=52，36就是上面那行的36,而16就是34-18算出來的16
結論就是第二行是不受200%的影響的，他只和默認行高作等差計算

不上代碼了，若是把200%改成500%，第一行的行高應該是18×5=90
第2行的高度是90+16=106px

#字體高度

若是在css裏定義p下字體的大小是18px（不是字的高度啊）的話，實際上某個字的佔用高度大約在20px左右（能夠包裹一個span來測量），而這個字又是在18px高的行裏，這是會形成行間距爲上下各-1px。
關於行間距會根據行高與字高來自動調整，好比css設定line-height:100px;font-size:18px,這時字高大概是在20px左右，行高是100px，上半部分的行距就是在40px左右，下半部分的行距也是40px左右
字體類型的不一樣，佔用的高度也會有差別，一樣是font-size:18px的時候，不用的字體，佔用的高度也不一樣，好比simsun字體，佔用的高度大概在19px左右，微軟雅黑字體佔用的高度大概在20左右。

#感謝

此文章因觀看CSS深刻理解之line-height後而寫，感謝張鑫旭,我也喜歡釣魚，在上海。