line-height、height、font-size · (。＿。） ✎＿学习计划走起

### **line-height** 、 **height** 、**font-size** #### 定义方式 ``` body { line-height: normal; // (1.2) line-height: inherit; line-height: 120%; // font-size * 120% line-height: 25px; line-height: 1.5; // font-size * 1.5 } ``` CSS中起高度作用的应该就是`height`以及`line-height`了！如果一个标签没有定义`height`属性(包括百分比高度)，那么其最终表现的高度一定是由`line-height`起作用。 ``` <!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } body { margin-top: 30px; } .box1, .box2 { margin-top: 30px; font-size: 14px; border: 1px solid #cccccc; } .box1 { line-height: 0; } .box2 { line-height: 1.5; } .parent-box { margin-top: 30px; font-size: 10px; line-height: 150%; /*line-height: 1.5;*/ } .son-box { font-size: 30px; } .mulit-line { margin-top: 30px; line-height: 150px; border:1px dashed #cccccc; } .mulit-line span { font-size: 12px; display: inline-block; vertical-align: middle; line-height: 1.4em; } </style> </head> <body>  <div class="box1"> line-height 1 </div> <div class="box2"> line-height 2 </div>  <div class="parent-box"> 我是父文本 <p class="son-box"> 我是子文本 </p> </div>  <p class="mulit-line"> <span>这里是高度为150像素的标签内的多行文字，文字大小为12像素。<br />这里是第二行，用来测试多行的显示效果。</span> </p> </body> </html> ``` #### 行高、行距、半行距、内容区、行内框、行框 ![](https://img.kancloud.cn/51/6c/516cb1ca96af97660814f11934c6b350_739x350.png) **行高：** 指上下文本行的基线间的垂直距离； **行距：** 指一行底线到下一行顶线的垂直距离； **半行距：** 行距的一半； **内容区：** 底线和顶线包裹的区域，即图中深灰色背景区域。 **行内框：** 每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域，而设定行高时行内框高度不变，半行距【分别增加/减少到内容区域的上下两边。 **行框（line box）：** 是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。 ![](https://img.kancloud.cn/f3/09/f309fa18714e7ba7031d43b5426b2a21_640x295.png) #### 文本垂直居中 * 单行文本把`line-height`设置为`box`的大小可以实现单行文字的垂直居中。 * 多行文本对于高度固定的`div`，里面文字多行显示，可以借助于`line-height`来实现，设置多行文本`inline-block`作为一个整体即可。