行高的常见表达方式有以下三种:
/* 方法一 2em */
.demo1 {
font: 20px/2em 'microsoft yahei';
background: #f00;
}
/* 方法二 200% */
.demo2 {
font: 20px/200% 'microsoft yahei';
background: #0f0;
}
/* 方法三 2 */
.demo3 {
font: 20px/2 'microsoft yahei';
background: #00f;
}
p {
font-size: 40px;
}
其中方法1与方法2是相同的,都是直接继承父元素的已经计算好的行高值,本身的font-size不影响行高的值。白话说就是,‘拿过来就用’,举个不恰当的例子就好比是,小明继承了爸爸的房子,直接就帮进去住
方法3则是只继承行高的数字然后结合自身的font-size大小再计算。白话就是,‘拿回来还得再加工’,比如小明继承了爸爸的房子,感觉房间布置不是自己的style,所以根据自身的喜好重新装修了下
show you my code (原谅我的Chinglish😂)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>line-height</title>
<style type="text/css">
/* 方法一 2em */
.demo1 {
font: 20px/2em 'microsoft yahei';
background: #f00;
}
/* 方法二 200% */
.demo2 {
font: 20px/200% 'microsoft yahei';
background: #0f0;
}
/* 方法三 2 */
.demo3 {
font: 20px/2 'microsoft yahei';
background: #00f;
}
p {
font-size: 40px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="demo1">
<p>demo1</p>
</div>
<div class="demo2">
<p>demo2</p>
</div>
<div class="demo3">
<p>demo3</p>
</div>
</div>
</body>
</html>
好了,先写这么点,以后会把行高的其他内容补全