行高、字体框——CSS

_洋

已于 2022-04-12 19:08:52 修改

阅读量308

点赞数

分类专栏： JavaScript 文章标签： css3

于 2022-04-12 19:08:27 首次发布

本文链接：https://blog.csdn.net/mantou_riji/article/details/124131227

版权

JavaScript 专栏收录该内容

52 篇文章 7 订阅

订阅专栏

文章目录

行高
- 行高的应用：
字体框
行高会在字体框的上下平均分配

行高

行高是文字占有的实际高度，可以通过line-height来设置高度。
line-height:
行高可以直接指定一个大小（px em)
也可以直接设置成一个整数
如果是一个整数的话，行高将会是字体的指定的倍数
默认行高是字体大小的1.33倍。

eg：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>
    div{
        border:1px brown solid;
    }

    </style>
</head>
<body>
    <div>哈哈哈，吃了吗？</div>
</body>
</html>

默认行高：
在这里插入图片描述

设置：

    div{
        border:1px brown solid;
        line-height: 3;
    }

在这里插入图片描述

行高的应用：

当行高和容器的高度一样的话，单行文字就会垂直居中。
行间距 = 行高 - 字体大小
eg：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>
    div{
        border:1px brown solid;
        line-height: 2;
        font-size: 50px;
    }

    </style>
</head>
<body>
    <div>哈哈哈，吃了吗？Grab copies of Font Awesome, examples, templates, and other goodies to use in your projects and playtime.</div>
</body>
</html>

在这里插入图片描述

字体框

字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度。

有一个隐藏的字体框
在这里插入图片描述

行高会在字体框的上下平均分配

在这里插入图片描述
eg：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>
    div{
        border:1px brown solid;
        line-height: 3;
        font-size: 50px;
    }

    </style>
</head>
<body>
    <div>哈哈哈，吃了吗？</div>
</body>
</html>

输出：
在这里插入图片描述
即使行高 < 字体框

    div{
        border:1px brown solid;
        line-height: 0.5;
        font-size: 50px;
    }

输出：
在这里插入图片描述

_洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录