8.css行高三种设置和垂直居中及简写方式

教程大全  / 只看大图  / 倒序浏览   ©

#楼主# 2020-2-18

跳转到指定楼层

马上注册,分享更多源码,享用更多功能,让你轻松玩转云大陆。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

在CSS并没有为我们提供一个直接设置行间距的方式
我们只能通过设置行高来间接的设置行间距,行高越大行间距越大

使用line-height来设置行高

行高类似于我们上学单线本,单线本是一行一行,线与线之间的距离就是行高,
网页中的文字现实上也是写在一个看不见的线中的,而文字会默认在行高中垂直居中显示

行间距 = 行高 - 字体大小

通过设置line-height可以间接的设置行高,
可以接收的值:

  1. 直接就设置一个大小
  2. 可以指定一个百分数,则会相对于字体去计算行高
  3. 可以直接传一个数值,则行高会设置字体大小相应的倍数

1.直接设置一个大小

[pre][code] 2.设置百分比[pre][code] 3.设置数值[pre][code] 使用行高来设置垂直居中

对于单行文原来说,可以将行高设置为和父元素的高度一致,
如许可以是单行文本在父元素中垂直居中

预览效果:


145009k9ahm443ag9zohgc.png

可以通过font简写,来设置一个行高

在字体大小后可以添加/行高,来指定行高,该值是可选的,如果不指定则会使用默认值

[pre][code] 简写行高设置
分享淘帖
回复

使用道具

您的回复是对作者最大的奖励

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于作者

  • 主题

    9

  • 帖子

    76

  • 关注者

    0

Archiver|手机版|小黑屋|云大陆 | 赣ICP备18008958号-4|网站地图
Powered by vrarz.com!  © 2019-2020版权所有云大陆