面試官問(wèn)：Css line-height是如何繼承的
作者：dev
如果父元素的 line-height 設(shè)置為一個(gè)百分比（如 line-height: 150%），那么子元素的 line-height 將根據(jù)父元素的字體大小計(jì)算出一個(gè)新的行高。
line-height 屬性在 CSS 中是繼承的，但有一些特殊之處。它的繼承規(guī)則如下：
- 繼承自父元素：
line-height是一個(gè)繼承屬性，這意味著子元素默認(rèn)會(huì)繼承父元素的line-height值。 - 數(shù)值繼承：如果父元素的
line-height設(shè)置為一個(gè)數(shù)值（如1.5），子元素也會(huì)繼承這個(gè)數(shù)值。但是，這個(gè)數(shù)值會(huì)影響到字體的行高，因?yàn)樗窍鄬?duì)于該元素的字體大小進(jìn)行計(jì)算的。 - 百分比繼承：如果父元素的
line-height設(shè)置為一個(gè)百分比（如line-height: 150%），那么子元素的line-height將根據(jù)父元素的字體大小計(jì)算出一個(gè)新的行高。 - 關(guān)鍵字繼承：如果父元素設(shè)置了
line-height為normal（默認(rèn)值），那么子元素也會(huì)繼承normal，即行高會(huì)自動(dòng)調(diào)整到適合文本的大小。 - 當(dāng)值為
inherit時(shí)：如果在子元素中顯式地設(shè)置line-height: inherit，那么子元素會(huì)繼承父元素的line-height。
總的來(lái)說(shuō)，line-height 是一個(gè)繼承性較強(qiáng)的屬性，但它的繼承效果取決于父元素的字體大小和 line-height 設(shè)置的方式。
下面是一個(gè)簡(jiǎn)單的示例來(lái)展示 line-height 如何繼承：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>line-height 繼承示例</title>
<style>
/* 父元素設(shè)置 line-height 為 1.5 */
.parent {
font-size: 20px;
line-height: 1.5;
background-color: lightyellow;
}
/* 子元素會(huì)繼承父元素的 line-height */
.child {
background-color: lightblue;
}
/* 另一個(gè)子元素設(shè)置 line-height 為 inherit，顯式繼承父元素的 line-height */
.child-inherit {
line-height: inherit;
background-color: lightgreen;
}
/* 這個(gè)子元素沒(méi)有繼承父元素的 line-height，顯式設(shè)置為 2 */
.child-custom {
line-height: 2;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="parent">
<p>我是父元素，line-height 設(shè)置為 1.5。</p>
<div class="child">
<p>我是子元素，默認(rèn)繼承父元素的 line-height。</p>
</div>
<div class="child-inherit">
<p>我是子元素，顯式使用 inherit，繼承父元素的 line-height。</p>
</div>
<div class="child-custom">
<p>我是子元素，顯式設(shè)置 line-height 為 2，不繼承父元素的值。</p>
</div>
</div>
</body>
</html>解釋?zhuān)?/span>
.parent元素的line-height設(shè)置為1.5。.child元素會(huì)默認(rèn)繼承父元素的line-height，因此它的行高為1.5。.child-inherit顯式地設(shè)置了line-height: inherit;，所以它也繼承了父元素的line-height，值為1.5。.child-custom顯式設(shè)置了line-height: 2;，因此它的行高為2，不會(huì)繼承父元素的line-height。
通過(guò)這個(gè)例子，你可以看到 line-height 如何繼承以及如何通過(guò)設(shè)置顯式的值來(lái)覆蓋繼承行為。
責(zé)任編輯：武曉燕
來(lái)源：
大遷世界
