CSS中行高的继承和单位之间的关系

最新推荐文章于 2022-05-31 22:10:22 发布

喵_美

最新推荐文章于 2022-05-31 22:10:22 发布

阅读量901

点赞数

分类专栏： html

原文链接：https://blog.csdn.net/k491022087/article/details/52389184

版权

html 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

我们知道行高是可以继承的并且行高的单位有四种情况。

1具体像素值如：line-height: 16px;

2 em

em是指当前标签设置的字体大小，比如当前标签字体大小是16px，那么2em = 32px；

3 %

%与em一样都是以当前标签设置的字体大小为基准，比如当前标签字体大小是16px，那么line-height: 200%; 则字体大小为32px;

4什么单位都不带。

  与%是一样的，比如当前标签字体大小是16px，line-height:2;则字体大小为32px;

先来看一个行高正常继承的例子

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .one {
            font-size: 20px;
            line-height: 2;
            /*line-height: 200%;*/
            /*line-height: 2em;*/
        }
    </style>
</head>
<body>
<div class="one">
    <div class="two">看看字体的大小</div>
</div>
</body>
</html>

在父元素里不管设置line-height:2;line-height:200%; 或者line-height:2em;中其中那一种，都可以发现字体的行高变成40px.

如果我们给子元素div也设置字体为25px，父元素的行高为2em或者200%，行高依然是40px。

.one {
    font-size: 20px;
    line-height: 2em;
    /*line-height: 200%;*/
}
.two {
    font-size: 25px;
}

那么问题来了，如果我们父元素的行高为2(不带单位)，那么行高是否仍然为40px呢？

.one {
    font-size: 20px;
    line-height: 2;
}
.two {
    font-size: 25px;
}

在浏览器中我们可以发现行高变成了50px

因此我们在设置行高的时候需要注意一下两点：

1、在设置行高的时候，如果单位是em或者%，那么将来行高会先计算出来结果以后再继承给子元素。

2 、在设置行高的时候，如果单位是没有单位，那么将来行高会先继承给子元素，然后再计算出行高。

来源：CSDN
原文：https://blog.csdn.net/k491022087/article/details/52389184

喵_美

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS中行高的继承和单位之间的关系

我们知道行高是可以继承的并且行高的单位有四种情况。1具体像素值如：line-height: 16px;2 emem是指当前标签设置的字体大小，比如当前标签字体大小是16px，那么2em = 32px；3 %%与em一样都是以当前标签设置的字体大小为基准，比如当前标签字体大小是16px，那么line-height: 200%; 则字体大小为32px;4什么单位都不带。 ...
复制链接

扫一扫

专栏目录