1.观察下面代码,分析p标签的行高会是多少?
<style>
body {
font-size:20px;
line-height:200%;
}
p {
font-size:16px;
}
</style>
<body>
<p>AAA</p>
</body>
解析:行高是可以继承的,如果子元素没有设置行高,则继承父标签的行高。如果父标签的行高单位是百分比,那么子元素的行高与父标签的文字大小有关系。子元素的行高=父元素的行高*父元素的字体大小;所以p标签的行高应该是40px
2.观察下面代码,分析p标签的行高会是多少?
<style>
body {
font-size:20px;
line-height:2;
}
p {
font-size:16px;
}
</style>
<body>
<p>AAA</p>
</body>
解析:行高是可以继承的,如果子元素没有设置行高,则继承父标签的行高。如果父标签的行高无单位,那么子元素的行高与自身的文字大小有关。子元素的行高=父元素的行高*子元素的字体大小;所以p标签的行高应该是32px
总结
1.若父元素行高有具体数值,则子元素直接继承该值 2.若父元素行高为比例形式,则子元素继承该比例(自身font-size*比例) 3.若父元素行高为百分比形式,则子元素继承计算出来的值(父元素font-size*父元素行高百分数)