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% 都表示行高为字体尺寸的二倍。
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦