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

来源：互联网发布：sql删除表数据编辑：程序博客网时间：2024/06/04 20:10

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

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

0 0