<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.father {
font-size: 16px;
line-height: 150%;
position: relative;
top: 100px;
left: 50px;
}
.child p {
font-size: 30px;
margin: 0;
padding: 0;
}
.ch2 {
border: 1px solid pink;
background: #eee;
}
</style>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="father">
我是父元素
<div class="child">
<p class="ch1">我是子元素1</p>
<p class="ch2">我是子元素2</p>
</div>
<!-- 当line-height:150%的效果，父元素的行高为150%时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:150%时，字元素的行高等于16px * 150% = 24px： -->
<!-- 当line-height:1.5em的效果，父元素的行高为150%时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:1.5em时，子元素的行高等于16px * 1.5em = 24px： -->
<!-- 当line-height:1.5的效果，父元素行高为1.5时，会根据子元素的字体大小动态计算出行高值让子元素继承。所以，当line-height:1.5时，子元素行高等于子元素字体30px * 行高1.5 = 45px -->
</div>
</body>
</html>
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
