css中父元素定义行高的不同单位和不带单位对子元素文本显示的影响，下面先上代码和截图然后进行说明：
<!DOCTYPE html>
<html>
<head>
<title>居中其他方法</title>
<meta charset="utf-8">
<style>
div,
p {
margin: 0;
padding: 0;
}
.parent {
font-size: 10px;
border: 1px solid #f00;
margin: 10px;
}
.px-parent { line-height: 20px; }
.em-parent { line-height: 2em; }
.percent-parent { line-height: 200%; }
.units-parent { line-height: 2; }
.child { font-size: 26px; }
</style>
</head>
<body>
<div class="px-parent parent">
<p class="px-line-height child">父元素用px定义行高</p>
<p class="px-line-height child">px-line-height</p>
</div>
<div class="em-parent parent">
<p class="em-line-height child">父元素用em定义行高</p>
<p class="em-line-height child">em-line-height</p>
</div>
<div class="percent-parent parent">
<p class="percent-line-height child">父元素用%定义行高</p>
<p class="percent-line-height child">percent-line-height</p>
</div>
<div class="units-parent parent">
<p class="units-line-height child">父元素定义行高时未加单位</p>
<p class="units-line-height child">units-line-height</p>
</div>
</body>
</html>
说明：我们知道行高是可以继承的。当父元素的行高值没有带上单位时，子元素使用自己的字体尺寸并计算出行高值让子元素继承（子元素的行高=父元素中 line-height 的值 子元素的字体大小），本例中子元素的行高为 262=52px；当父元素的行高带有单位时，父元素先根据自己的字体尺寸计算出行高，让子元素继承（子元素的行高=父元素的行高），line-height: 2em 和 line-height: 200% 都表示行高为字体尺寸的二倍。
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦