line-height继承的三种情况
- line-height=20px
body {
line-height: 20px;
font-size: 30px;
}
p {
font-size: 16px;
}这时候p标签的line-height=20px，继承body的line-height=20px
- 【CSS（line-height继承时的坑）】line-hieght=1.5
body { line-height: 1.5; font-size: 30px; } p { font-size: 16px; }
这时候p标签的line-height=1.5，继承body的line-height=1.5。则p标签的line-height=16px * 1.5 = 24px
- line-hieght=200%
body { line-height: 200%; font-size: 30px; } p { font-size: 16px; }
这时候p标签的line-height=60px，先计算body的line-height=200% = 200% * 30px = 60px。再p标签继承body的line-height=60px
推荐阅读
- html|分享 82个实用的前端开发工具
- HTML+CSS+JS小实例|HTML5+CSS3+JQuery小实例（简单又令人惊艳的hover效果登录界面）
- python|12 个要收藏的前端 CSS 网站
- S1.|Vue组件------star组件设计
- html|前端打印设置相关
- HTML+CSS|【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
- 前端|【HTML+CSS+JS】注册页面模板
- CSS样式|CSS效果集合
- 纯css3实现下拉箭头、关闭按钮旋转效果