CSS line-height-step属性简介

这篇文章发布于 2021年03月14日,星期日,11:00,归类于 CSS相关。 阅读 10117 次, 今日 1 次 4 条评论

 

line-height-step占位图

CSS中的line-height-step属性可以让文字内容占据的行高永远是line-height-step属性值的整数倍。

语法如下所示:

line-height-step: <length>

属性值只能是长度值,初始值是0

这里有个案例,源自CSS Rhythmic Sizing规范

:root {
    font-size: 12pt;
    --my-grid: 18pt;
    line-height-step: var(--my-grid);
}
h1 {
    font-size: 20pt;
    margin-top: calc(2 * var(--my-grid));
}

然后就会有如下图所示的行间距排版效果。

line-height-step属性效果示意

可以看到<h1>元素的正好占据了2个line-height-step行高单元的距离。这就是line-height-step属性的作用,让元素都在规律的行高单元中排版。

不过可惜的是,line-height-step属性过于新颖,截止到我写下这段文字,还没有任何浏览器默认支持该属性,Chrome浏览器下需要开始实验特性才支持。

line-heigt-step兼容性

Chrome浏览器虽然可以识别该CSS属性,但是并没有看到相应的渲染效果(可能是我使用的姿势不对),考虑到技术总是在发展的,现在没有效果并不代表将来也是无效的,因此我依然做了个实例页面,你可访问下面地址测试下当前浏览器是否已经支持该CSS属性:https://demo.cssworld.cn/new/9/7-1.php

此CSS特性我也是边学边写,可能有表述不准确的地方,欢迎指正。

OK,以上就是本文全部内容,简介嘛,所以短了一点。

(本篇完)

分享到:


发表评论(目前4 条评论)

  1. 某某某说道:

    貌似在20年前很流行格子纸背景,但到了今天也没有完美对齐的方法……这是个易行的希望。

  2. 王大锤说道:

    老大,怎么让tetxtarea多行文本垂直居中?