此处仅列举几种我的认为易模糊不清的情形。
html结构以下:html
<div class="parent"> <div class="child"> 测试行高 </div> </div>
.parent{ font-size: 12px; ine-height: 1; } .child{ font-size: 16px; }
父元素parent为
子元素child为
代表 子元素继承了父元素显示设置的数字值,与父元素自身font-size有关测试
.parent{ font-size: 12px; line-height: 100%; } .child{ font-size: 16px; }
父元素parent为
子元素child为
代表子元素继承了父元素根据百分比计算后的行高,与父元素自身font-size无关spa
对于一、2情形,给子元素child增长line-height: inherit
,衍生情形三、4,表现不变code