CSS line-height 三种赋值方式有何区别 (琐碎知识点整理)

最新推荐文章于 2022-01-06 20:17:43 发布

黑木令

最新推荐文章于 2022-01-06 20:17:43 发布

阅读量3.9k

点赞数

分类专栏：前端 css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/wuzhiyue2/article/details/117991297

版权

前端 css 专栏收录该内容

19 篇文章 6 订阅

订阅专栏

之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作中开发问题总结相关的内容; 不积跬步，无以至千里, 戒焦戒躁。

好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

line-height 三种单位简书

 1. 带有单位的 line-height 会被计算成 px 后继承 。
 
 2. 子元素的 line-height = 父元素的 line-height * font-size （如果是 px 了就直接继承）。
 
 3. 而不带单位的 line-height 被继承的是倍数，子元素的 line-height = 子元素的 font-size * 继承的倍数 。

1. 第一种设置 line-height 方式: 在需要的元素标签下设置 line-height: XXpx;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS line-height 三种赋值方式的区别 </title>
</head>

<style>
.w_line-height p {
  padding: 0;
  margin: 12px 0;
}
/* 单位: px */
.w_line-height-px {
  line-height: 80px;
}
.w_line-px {
  font-size: 32px;
  /* 我们在这里可以注释掉当前 line-height 设置, 会发现当前元素的 line-height 是父元素设置的 line-height;
     反之, 当我们在当前元素设置了 line-height 行高, 会覆盖父级元素设置的行高 。
  */
  line-height: 160px;
  background-color: gold;
}
</style>
<body>
  <div class="w_line-height-px w_line-height">
    <p class="w_line-px">单位: px === 父级元素设置 font-size: 16px; 时, 当前元素设置 line-height: 20px; 时 的高度为 20px</p>
  </div>
  </div>
</body>

</html>

2. 第二种设置 line-height 方式: 父级元素设置 font-size: aapx; 时, 当前元素设置 line-height: bbem; 时的高度为 aa * bb = yy px

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS line-height 三种赋值方式的区别 </title>
</head>

<style>
.w_line-height p {
  padding: 0;
  margin: 66px 0;
}

/* 单位: em */
.w_line-height-em {
  font-size: 16px;
}
.w_line-em {
  line-height: 3em;
  background-color: cornflowerblue;
}

</style>
<body>
  <div class="w_line-height-em w_line-height">
    <p class="w_line-em">单位: em  ===   父级元素设置 font-size: 16px; 时, 当前元素设置 line-height: 3em; 时 的高度为 48px</p>
  </div>
  </div>
</body>

</html>

3. 第三种设置 line-height 方式: 父级元素设置 line-height: 16; 时, 当前元素设置 font-size: 12px; 时的高度为 10 * 18 = 180 px

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS line-height 三种赋值方式的区别 </title>
</head>

<style>
.w_line-height p {
  padding: 0;
  margin: 66px 0;
}
/* 单位: 纯数字 */
.w_line-height-num {
  line-height: 10;
}
.w_line-num {
  font-size: 18px;
  /* line-height: 20px; */
  background-color: cyan;
}

</style>
<body>
  <div class="w_line-height-num w_line-height">
    <p class="w_line-num">单位: 纯数字  === 父级元素设置 line-height: 16; 时, 当前元素设置 font-size: 12px; 时 的高度为 10 * 18 = 180 px</p>
  </div>
</body>

</html>

4. 第四种设置 line-height 方式: 父级元素设置 line-height: 500%;(如果浏览器默认 line-height 为 12时计算结果为 5 * 12 ; 如果浏览器默认行高为 16时则计算结果为 5 * 16 ) 时, 当前元素设置 font-size: 24px; 时的高度为 80px

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS line-height 三种赋值方式的区别 </title>
</head>

<style>
.w_line-height p {
  padding: 0;
  margin: 66px 0;
}
/* 单位: 百分比 */
.w_line-height-percentage {
  /* 谷歌浏览器的默认行高是 16px */
  line-height: 500%;
}
.w_line-percentage {
  font-size: 24px;
  background-color: deepskyblue;
}

</style>
<body>
  <div class="w_line-height-percentage w_line-height">
    <p class="w_line-percentage">单位: 百分比  === 父级元素设置 line-height: 500%; 时, 当前元素设置 font-size: 24px; 时 的高度为 80px</p>
  </div>
</body>

</html>

5. 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS line-height 三种赋值方式的区别 </title>
</head>

<style>
.w_line-height p {
  padding: 0;
  margin: 66px 0;
}



/* 单位: px */
.w_line-height-px {
  line-height: 80px;
}
.w_line-px {
  font-size: 32px;
  /* 我们在这里可以注释掉当前 line-height 设置, 会发现当前元素的 line-height 是父元素设置的 line-height;
     反之, 当我们在当前元素设置了 line-height 行高, 会覆盖父级元素设置的行高 。
  */
  line-height: 160px;
  background-color: gold;
}


/* 单位: em */
.w_line-height-em {
  font-size: 16px;
}
.w_line-em {
  line-height: 3em;
  background-color: cornflowerblue;
}


/* 单位: 纯数字 */
.w_line-height-num {
  line-height: 10;
}
.w_line-num {
  font-size: 18px;
  /* line-height: 20px; */
  background-color: cyan;
}


/* 单位: 百分比 */
.w_line-height-percentage {
  /* 谷歌浏览器的默认行高是 16px */
  line-height: 500%;
}
.w_line-percentage {
  font-size: 24px;
  background-color: deepskyblue;
}

</style>
<body>
  <div class="w_line-height-px w_line-height">
    <p class="w_line-px">单位: px === 父级元素设置 line-height: 80px; 时, 当前元素设置 line-height: 160px; 时 的高度为 20px</p>
  </div>

  <div class="w_line-height-em w_line-height">
    <p class="w_line-em">单位: em  ===   父级元素设置 font-size: 16px; 时, 当前元素设置 line-height: 3em; 时 的高度为 48px</p>
  </div>

  <div class="w_line-height-num w_line-height">
    <p class="w_line-num">单位: 纯数字  === 父级元素设置 line-height: 16; 时, 当前元素设置 font-size: 12px; 时 的高度为 10 * 18 = 180 px</p>
  </div>

  <div class="w_line-height-percentage w_line-height">
    <p class="w_line-percentage">单位: 百分比  === 父级元素设置 line-height: 500%; 时, 当前元素设置 font-size: 24px; 时 的高度为 80px</p>
  </div>
</body>

</html>

如果对你有所帮助，大家可以点个关注；整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 每次整理时都在思考如何让大家更容易理解, 更容易找到、看到自己想看到的内容; 无论知识点是大是小, 我都会验证后再分享, 以防自己发表的文章给大家造成误导。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。

黑木令

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS line-height 三种赋值方式有何区别 (琐碎知识点整理)

之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作中开发问题总结相关的内容; 不积跬步，无以至千里, 戒焦戒躁。好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。1. 带有单位的 line-height 会被计算成 px 后继承。2. 子元素的 line-height = 父元素的 line-he
复制链接

扫一扫