关于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: 100px;
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的值做相应比例的缩放。