真正的能理解CSS中的line-height，height与line-height

小咪咪 2021-06-26 16:06 413阅读 0赞

在最近的项目中，常常用到`line-height`，只是简单的理解为行高但并没有深层次的理解，致使不能达到信手拈来的感觉。在此做一下总结，一是更深层次的了解什么是`line-height`，二是比较`height`与`line-height`的区别。

## 基本概念 ##

行高与行距从字面的意思是非常容易理解的，但是对布局和样式来说，我们应该更深入的理解各个属性之间的关系，比如`line-height`与`font-size`存在什么关系呢，`line-height`与所属元素的`height`又有什么联系呢？。好了，带着疑问，我们一同探究。

**行高是指文本行基线间的垂直距离。** 基线（`base line`）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。下图中两条红线之间的距离就是行高，上行的底线和下一行顶线之间的距离就是行距，而同一行顶线和底线之间的距离是font-size的大小，行距的一半是半行距。  
![在这里插入图片描述][20190714205339266.png]  
从上图我们就可以看出，行距、`font-size`与`line-height`之间的关系了吧。接下来进一步来看看这三者关系  
![在这里插入图片描述][20190714205429676.png]  
当`font-size`等于`line-height`时，`行距 = font-size - line-height = 0`；而当`font-size`大于`line-height`时，则会出现行距为负值，则两行重叠，如下图：  
![在这里插入图片描述][2019071420580622.png]  
关于CSS boxes的四种类型（`containing boxes、inline boxes、line boxes、content area`）和`line-height`五种取值方法（`line-height:normal;、line-height:inherit;、line-height:120%;、line-height:25px;、line-height:1.2`）。参见以下资料：  
**深入了解css的行高Line Height属性  
\[学习笔记\] css中的line-height**

接下来将讲一讲`height`和`line-height`的联系  
`CSS`中起高度作用的应该就是`height`以及`line-height`。`height`是用来设置元素的高度，比如`img`的高度、`div`的高度等。以一个`div`为例，来进一步说明两个问题：  
第一个问题：如果不设置`div`的高度时，是`div`的`font-size`决定了`div`的高度还是`line-weight`的值。不防来写段代码进行直观的说明

CSS:

.test1{ 
    font-size:20px; 
    text-align:center;
    line-height:0; 
    border:1px solid black; 
    background: red;
    }

html:

显示结果（图1）：  
![在这里插入图片描述][20190714213504430.png]

CSS:

.test2{ 
    font-size:1px; 
    text-align:center;
    line-height:20px; 
    border:1px solid black; 
    background:red;
    }

html:

显示结果（图2）：  
![在这里插入图片描述][20190714215155307.png]  
由图1和图2可知，在没有设置`div`的`height`属性时，`div`的高度根据`line-height`的大小而变化，且文字垂直居中。

第二问题：`div`的`height`与`line-height`的大小关系不同时，会有什么显示结果呢？  
（1）`height = line-height`时  
![在这里插入图片描述][20190714215356679.png]  
（2）`height>line-height`时  
![在这里插入图片描述][20190714215459370.png]  
（3）`height<line-height`时  
![在这里插入图片描述][20190714215536206.png]  
可以通过“测试”两个字在页面上的位置，能反映出`height`与`line-height`的大小关系。如果通过上面的学习，没有疑问的话，可以说初步理解了`line-height`。

[20190714205339266.png]: /images/20210626/2eb1058034c541cf9e76b25b658920bc.png
[20190714205429676.png]: /images/20210626/498adc186fcb4485ab93e207fdad7f04.png
[2019071420580622.png]: /images/20210626/99ccaef970f0417bbc678d24949b48a7.png
[20190714213504430.png]: /images/20210626/0ac2c44235324c12b9b36cc6b44a83fb.png
[20190714215155307.png]: /images/20210626/1d66ebfabbb747a38a453b46053a4101.png
[20190714215356679.png]: /images/20210626/a6093c1b762641dc80b18fdb790bb3b0.png
[20190714215459370.png]: /images/20210626/7bb4043487234d3596fb6c7e3d9b0121.png
[20190714215536206.png]: /images/20210626/18a335e5db2f4942aab9870679419b76.png