line-height 百分比与数值的区别
类别:Web前端 浏览量:2566
时间:2016-2-14 line-height 百分比与数值的区别
line-height 百分比与数值的区别一、line-height的值为百分比
子集元素继承父级元素的距离
1、例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
font-size:14px;
line-height:150%;
background: black;
}
p{
font-size:26px;
background: gray;
color: white;
}
</style>
</head>
<body>
<p>你好!</p>
</body>
</html>
2、效果如图
3、说明
body{font-size:14px;line-height:150%;} p{font-size:26px;} //结果就是: body{line-height:21px;}//14*150%=21p{line-heigt:21px;}//继承父元素
二、line-height的值为数值
子元素计算各自的行距离
1、例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
font-size:14px;
line-height:1.5;
background: black;
}
p{
font-size:26px;
background: gray;
color: white;
}
</style>
</head>
<body>
<p>你好!</p>
</body>
</html>
2、效果如图
3、说明
body{font-size:14px;line-height:1.5;} p{font-size:26px;} //结果就是:body{line-height:21px;} //14*1.5=21
p{line-height:39px;} //26*1.5=39
标签:line-height
您可能感兴趣
- line-height 百分比与数值的区别
- css行高line-height的用法
- css line-height(CSS中的line-height行高属性学习教程)
- css水平或者垂直居中的写法(深入理解CSS行高line-height与文本垂直居中的原理)
- height与line-height的关系(为什么你写的height:100%不起作用)
- 《九牛之人降魔传》开机 演员祁高坤化身九牛之人除魔卫道(九牛之人降魔传开机)
- 王铲铲的致富之路无限金币卡法攻略教学(王铲铲的致富之路无限金币卡法攻略教学)
- 文明6金币太少怎么办 文明6无限刷钱教程(文明6金币太少怎么办)
- 开国中将,王牌军63军首任政委,两个连襟一个上将一个少将传为佳话(王牌军63军首任政委)
- 臭名昭著的731部队最高负责人 石井四郎(臭名昭著的731部队最高负责人)
- 王牌部队,你看的剧情我看的时尚(你看的剧情我看的时尚)
热门推荐
- DataRow转换时对DBNULL的处理
- 常见的web富文本编辑器有哪些
- python try高级用法(python try 异常处理史上最全)
- html5canvas功能介绍(Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 附转换公式)
- php代码最可靠的加密方式(php DES加密算法实例分析)
- pytorch入门与实战(详解PyTorch基本操作)
- url编码及解码(伪静态URL中文乱码问题解决方法)
- 详解如何获取localStorage最大存储大小的方法(详解如何获取localStorage最大存储大小的方法)
- idea如何运行tomcat项目(在IDEA 2020.3.1中部署Tomcat并且创建第一个web项目的过程详解)
- python外部如何调嵌套函数(python中嵌套函数的实操步骤)