css line-height 探究

最新推荐文章于 2022-08-24 19:29:25 发布

裕轩汪

最新推荐文章于 2022-08-24 19:29:25 发布

阅读量671

点赞数 1

分类专栏： css碎碎念

本文链接：https://blog.csdn.net/caoxun03/article/details/51881284

版权

css碎碎念专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css的line-height属性，所有浏览器都支持，表示行高，可用200％＝2em，px，1.5来赋值
废话不多少，先直接上代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>line-height</title>
    <style media="screen">
      .number {
        line-height: 1.5;
      }

      .percent{
        line-height: 150%;
      }

      .font20{
        font-size: 20px;
      }

      .font10{
        font-size: 10px;
      }

      .linepx {
        line-height: 10px;
      }
    </style>
  </head>
  <body>

    <div class="linepx font10">
      啦啦啦
      <br>
      <div class="font20">
        布啦啦
      </div>
    </div>

    <div class="number font10">
      啦啦啦
      <br>
      <div class="font20">
        布啦啦
      </div>
    </div>

    <div class="percent font10">
      啦啦啦
      <br>
      <div class="font20">
        布啦啦
      </div>
    </div>


  </body>
</html>

在浏览器中可以看到，对于使用px来定义行高的
这里写图片描述
每行的行高都是10px是固定不变的，并不关心当前div中字体的大小，很简单也很好理解

那么我们来看一看1.5与150％(1.5em)到底有什么区别
先来看line-height为1.5的
这里写图片描述
可以看到总的行高为45px

这个图可以清楚的看到子元素的div的行高为30px
啦啦啦文字的行高为15px，固我们可以得出结论，1.5将继承到子元素的每一层，每一层的行高由当前元素的字体大小乘以倍数决定

再来看line-height为150%的
这里写图片描述
这个图片可以清楚的看到父元素的行高为30px，也就是15px＋15px，于是我们得知当值为%时，先由父元素根据当前字体大小计算出行高，再由子元素继承固定的行高

如父元素只是单纯的外层div，没有字则都顺次继承到子元素中，1.5与150％的区别不大

裕轩汪

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css line-height 探究

css的line-height属性，所有浏览器都支持，表示行高，可用200％＝2em，px，1.5来赋值废话不多少，先直接上代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>line-height</title> <style media="screen"> .number {
复制链接

扫一扫

专栏目录