行高的常見表達(dá)方式有以下三種:
/* 方法一 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是相同的陌知,都是直接繼承父元素的已經(jīng)計(jì)算好的行高值臭觉,本身的font-size不影響行高的值。白話說就是廓俭,‘拿過來就用’,舉個(gè)不恰當(dāng)?shù)睦泳秃帽仁前ぃ∶骼^承了爸爸的房子白指,直接就幫進(jìn)去住
方法3則是只繼承行高的數(shù)字然后結(jié)合自身的font-size大小再計(jì)算。白話就是酵紫,‘拿回來還得再加工’告嘲,比如小明繼承了爸爸的房子,感覺房間布置不是自己的style奖地,所以根據(jù)自身的喜好重新裝修了下
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>
好了橄唬,先寫這么點(diǎn),以后會(huì)把行高的其他內(nèi)容補(bǔ)全