欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS基线

程序员文章站 2022-03-11 08:24:52
什么是CSS基线,怎么使用基线布局?...

line-height

行距、行间距

行距: 相邻文本行间 上一个文本行基线下一个文本行基线 之间的距离。

行间距: 相邻文本行间 上一个文本行下行线下一个文本行上行线 之间的距离。

行距 = 行间距 + 字体大小

在CSS中,CSS属性line-height则是用于设置真实的行距。从W3C Rec中看出,line-height就是行距,而line-height的字面意思即为“行高”,推导结果CSS中 行高即是行距

了解了行高,行距,行间距。那么接下来介绍line-height的重要属性–垂直居中。

我们知道,行距(leading) = 行间距(line-space) + 字体大小(font-size)。行间距与字体大小都可以通过相应CSS属性设置,问题是行间距所占的空间是怎么分配的呢?

CSS基线

CSS采用的是将行间距对半开,然后分配到上下两端,这里引用了Half-leading的概念, Half-leading = 行距/2

由于行距可能为负值,可以知道行间距可能为负数,那么垂直居中还有效么?

答案是肯定的,行间距为负数时,Half-leading 自然也是负数,只是上下两端从增加等量空间变为减少等量空间而已。如下例子:

<div style="position:relative;top:100px;font-size:90px;line-height:10px;background:yellow;">
	<span style="border:solid 1px red;line-height:10px;">x</span>
</div>

CSS基线

line-height属性

CSS line-height 属性 | 菜鸟教程

CSS line-height 属性 | W3school

描述
可能值 normal | <number> | <lenght> | <percentage> | <inherit>
默认值 normal
继承性 yes

normal

对于normal,其实就是一个值,但是由浏览器决定,实际值一般在1.0~1.2之间(闭区间)

不同浏览器下,normal 不同;
同一浏览器下,font-size 不同,normal 也不同;
同一浏览器下,font-size 相同,font-family 不同,normal 也会变化。

normal 的平均值确实是 1.0~1.2(闭区间),但是具体到特定浏览器、font-family 和 font-size时,normal值可能会大于1.2。

length

指定长度用于计算线盒高度,负值非法。

设置固定值,单位可以是 px 、pt 。

好处就是简单,设置是什么,line-height的实际高度就是什么。

坏处是子元素默认 继承 父容器的line-height,若子元素的font-size 大于 父容器的font-size,那么子元素的文本行会什么密集。

解决方案,一般是采用 相对 font-size 实际大小 来设置 line-height 值的方式,如默认 normal 方法。

percentage(%)

计算值是百分比乘以元素计算字体大小,负值非法。

值的注意的是,参考系的确是font-size,但子元素继承的是父容器的实际 line-height 值,也就是说父容器设置为 font-size:20px;line-height:200%;,子元素继承的line-height值为 40px,而不是 200% ,因此又回到了 方式 的问题了。

number

属性的使用值是 这个数字 乘以 元素的字体大小,负值非法,计算值与指定值相同。

和方式一样,以 font-size 为参考系,以相对值方式设置 line-height。

唯一不同的是,子元素继承的是父容器的值,参考系自动变为子元素的 font-size

line-height: 1.2em;

line-height: 1.2;

上门的两句其实是等价的,若想将参考系 为根元素的 font-size , 需要CSS3的新增line-height:1.2rem;

深入理解 line-height 和 vertical-align

本文地址:https://blog.csdn.net/qq_27875945/article/details/107499237