摘要：从一个内联元素布局引发对的探讨一前言这个属性对于各位前端的小伙伴来说并不陌生。对于块级元素，它指定元素行盒的最小高度。对于非替代的元素，它用于计算行盒的高度。如存在属性的六总结以上就是本人对行内布局以及的一些思考总结。
从一个内联元素布局引发对line-height的探讨 一、前言
line-height这个属性对于各位前端的小伙伴来说并不陌生。在之前写页面的时候碰到过一个该属性相关的问题，在查阅资料后决定跟大家分享一下我所理解的line-height。所讲述的内容不一定都是正确的，仅供参考。
二、line-height 定义 文档规范line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。
属性值| 属性 | 描述 |
|---|---|
| normal | 默认值。合理的行间距。根据浏览器和字体"font-family"不同而不同。 |
| number | 设置数值，此数值会与当前的字体尺寸相乘来设置行间距。 |
| length | 设置固定的行间距。 |
| % | 基于当前字体尺寸的百分比间距。 |
| inherit | 规定应该从父元素继承line-height属性的值 |
相信大家都有写过这样一个布局 一个大标题，然后接着一个小标题，需要垂直居中
.title {
font-size: 20px;
line-height: 20px;
}
.sub-title {
font-size: 14px;
line-height: 20px;
}
大标题
小标题
两个相邻的内联元素，字体一大一小。畅想的结果是两个 span 的高度都是20px, div的高度也是20px，多么完美，但结果往往不近人意....
div的高度为22.4 .title 的高度为26.4 .sub-title 的高度为19
那么问题来了：为什么没有一个元素的高度为20?
然而 规范 告诉我们，对于非替代的 inline 元素，它用于计算行盒（line box）的高度。
这里引出了两个概念：替代元素、行盒（line-box）
六、总结替代元素
替代元素是指内容可以替换的元素，实际上就是content box可以被替换的元素。如存在src=""属性的
以上就是本人对行内布局以及line-height的一些思考总结。
另外也可以使用flex布局一把梭，就没这么多事了~。
参考
CSS深入理解vertical-align和line-height的基友关系
CSS行高line-height的一些深入理解及应用
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116129.html
摘要：从一个内联元素布局引发对的探讨一前言这个属性对于各位前端的小伙伴来说并不陌生。对于块级元素，它指定元素行盒的最小高度。对于非替代的元素，它用于计算行盒的高度。如存在属性的六总结以上就是本人对行内布局以及的一些思考总结。 从一个内联元素布局引发对line-height的探讨 一、前言 line-height这个属性对于各位前端的小伙伴来说并不陌生。在之前写页面的时候碰到过一个该属性相关的...
摘要：默认情况下，行内元素不会以新行开始，而块级元素会新起一行。常见的内联元素有分类替换元素在中，可替换元素的展现效果不是由来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于的。 前言 在写作本文章前原本打算只是复习一下 line-height 和 vertical-height 这两个属性而已, 结果发现掉进了一个大坑网上有很多篇文章看的我云里雾里的, 最后决定还是从头来一遍吧, ...
摘要：默认情况下，行内元素不会以新行开始，而块级元素会新起一行。常见的内联元素有分类替换元素在中，可替换元素的展现效果不是由来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于的。 前言 在写作本文章前原本打算只是复习一下 line-height 和 vertical-height 这两个属性而已, 结果发现掉进了一个大坑网上有很多篇文章看的我云里雾里的, 最后决定还是从头来一遍吧, ...
阅读 3430·2023-04-26 02:48
阅读 1439·2021-10-11 10:57
阅读 2459·2021-09-23 11:35
阅读 1176·2021-09-06 15:02
阅读 3276·2019-08-30 15:54
阅读 1591·2019-08-30 15:44
阅读 860·2019-08-30 15:44
阅读 967·2019-08-30 12:52
