css 中的 font: 14px/20px 属性解析
在 css 中，font 属性用于定义文本的字体相关样式。当您遇到类似 font: 400 14px/20px roboto, sans-serif 这样的属性定义时，它可能会令人困惑，尤其是不清楚 "/20px" 部分的含义。
属性拆分
要理解这个属性，我们可以将它拆分成各个部分：
立即学习“前端免费学习笔记（深入）”；
- 400：表示字体的粗细，在这种情况下为标准字重。
- 14px：定义字体的尺寸。
- /20px：分隔符后定义行高，也就是相邻两行文字之间的垂直间距。
行高的作用
行高是一个重要的文本样式属性，它影响文本的可读性和美观度。它定义了文本行之间的垂直空间，有效地控制文本的紧凑程度和清晰度。
font: 14px/20px 的效果
此属性将有效地设置以下值：
font-size: 14px; line-height: 20px;
这意味着文本的字体大小为 14px，而相邻行之间的垂直间距为 20px。这比默认行高（通常为字体大小的 1.2 倍）略大，因此会增加文本之间的空间。
实际应用
在您提到的示例中，您为中间的 div 设置了 40px 的字体大小，导致文字重叠，div 的高度不会随着字体大小的增加而增加。这是因为此 div 继承了将行高设置为 20px 的 font 属性。
要解决这个问题，您可以指定一个更高的行高值，从而增加文本行之间的空间。或者，您还可以通过明确设置 line-height 属性来覆盖继承的样式。
