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后而写，感谢张鑫旭,我也喜欢钓鱼，在上海。