CSS使用记录：height、line-height、font-size的作用和区别

关于css块模型：css块模型

什么是line-height？

如上图所示，由于基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端。

• line-height：如图，两个红线之间和文本上下半行间距(行间距的一半)之间的高度
• 行间距：上一行个底线跟下一行的顶线之间的距离
• font-size：同行顶线和底线之间的距离

三者关系

font-size和line-height

// 未设置line-height，效果如上图
font-size: 100px;

// 设置line-height，并且font-size = line-height，效果如上图
font-size: 100px;
line-height: 100px;

// 设置line-height，并且font-size > line-height，效果如上图，两行字体重叠了
font-size: 150px;
line-height: 100px;

height和line-height

// 设置line-height为0，未设置height，设置font-size，效果如上图，元素(div元素)高度没有，只有一个上下边框的高度
font-size: 100px;
background-color: #f2f;
line-height: 0px;
border: 1px solid #111daa;

// 设置font-size为0，未设置height，设置line-height，效果如上图，元素(div元素)高度没有，只有一个上下边框的高度
font-size: 20px;
background-color: #f2f;
line-height: 100px;
border: 1px solid #111daa;

结论：没有设置div的height属性时，div的高度根据line-height的大小而变化，且文字垂直居中

当设置height = line-height时

当设置height > line-height时

当设置height < line-height时

综上所述：
使用一下：如果不设置height数值，直接设定line-height为100px，那么文本自动撑开，且垂直居中。

line-height高级

默认状态，浏览器使用1.0-1.2 line-height, 这是一个初始值。

有5种方式来定义line-height：
1.line-height可以被定义为：body{line-height:normal;}
2.line-height可以被定义为：body{line-height:inherit;}
3.line-height可以使用一个百分比的值body{line-height:120%;}
4.line-height可以被定义为一个长度值(px,em等) body{line-height:25px;}
5.line-height也可以被定义为纯数字， body{line-height:1.2}

计算line-height

我们知道一些css属性可以继承，从最外层的元素传递下去。

百分比赋值方式

body {
    line-height：120%;
}

如果body没设置font-size，默认是16px。

所以计算的lie-height的值是(16px * 120% = 19.2px)，这个值会被继承下去。即使body下面子元素设置了font-size的值，如果没设置line-height的值，都按照当前继承的line-height值渲染。

注意：这种设置line-height的方式，不管子元素设置多少font-size的大小，line-height不会跟着做相应比例的缩放。

长度赋值方式

body {
    line-height：20px;
}

如果body没设置font-size，默认是16px。

lie-height的值是(20px)，这个值会被继承下去。跟上面设置百分比的方式一样，即使body下面子元素设置了font-size的值，如果没设置line-height的值，都按照当前继承的line-height值渲染。

注意：这种设置line-height的方式，不管子元素设置多少font-size的大小，line-height也不会跟着做相应比例的缩放。

line-height: normal

body {
    line-height：normal;
}

如果body没设置font-size，默认是16px。

lie-height此时的值(约为1.2的倍数)，即当子元素设置font-size的时候，当前子元素的line-height是按照(font-size * 约1.2 = )来计算

注意：这种设置line-height的方式，line-height会跟着当前子元素的font-size的值做相应比例的缩放。

line-height: 2.5，用数字赋值

body {
    line-height：2.5;
}

如果body没设置font-size，默认是16px。

lie-height此时的值(2.5的倍数)，即当子元素设置font-size的时候，当前子元素的line-height是按照(font-size * 2.5 = )来计算

注意：这种设置line-height的方式，line-height会跟着当前子元素的font-size的值做相应比例的缩放。

所以一般在使用的时候设置纯数字赋值的方式比较好