答案为:
line-height: 2 表示单行文本的行高为它本身的两倍
line-height: 200% 表示单行文本的行高为系统默认字体的200%
在继承性上:
对父元素设置了line-height: 2后,父元素的子元素会继承line-height: 2这个属性,子元素的行高都是自身高度的2倍,是相对大小,子元素的字体大小不同,行高也会不同;
对父元素设置了line-height: 200%后,父元素的子元素会继承系统默认字体的200%,是一个固定的值,是固定大小,子元素的字体大小不同,行高都是固定某个值;
实际写代码验证下,看看对不对
浏览器:chrome(Chrome的默认字体大小为16px)
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>line-height: 2;</title>
<style>
.one {
line-height: 3; /*为了更好的区分,这里设置为3*/
}
.two {
line-height: 200%;
}
</style>
</head>
<body>
<div class="one">
line-height应该是他本身字体16px的3倍
</div>
<div class="two">
line-height应该是系统默认字体16px的200%
</div>
</body>
</html>
页面效果
CSS中line-height: 3;盒模型查看
去掉样式line-height: 3;看看
CSS中line-height: 200%;盒模型查看
去掉样式line-height: 200%;看看
继承性
对父元素设置line-height:2;
对父元素设置line-height:200%;