脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 > CSS line-height继承

CSS line-height的如何继承的问题

  发布时间：2020-08-18 16:31:27   作者：Milk595   我要评论
这篇文章主要介绍了CSS line-height的如何继承的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

Line-height的如何继承？

  • 写具体数值，如30px,则继承该值（比较好理解）写比例，如2/1.5,则继承该比例（比较好理解）
  • 比如body中line-height设为2，则p标签继承line-height为2,则算出来的p标签line-height为font-size * 2 =32px;
  • 写百分比，比如200%，则继承计算出来的值(考点)—当前的font-size * 200% 例子中：20 * 200% = 40px;

核心代码演示：

初始化

<style>
    body{
        font-size: 20px;
    }
    p {
        background-color: #ccc;
        font-size: 16px;
    }
    </style>
</head>
<body>
    <p>这是一行文字</p>
</body>

写具体数值

  body{
        font-size: 20px;
        line-height: 50px;
    }
    p {
        background-color: #ccc;
        font-size: 16px;
    }

写比例

  body{
        font-size: 20px;
        line-height: 1.5;
    }
    p {
        background-color: #ccc;
        font-size: 16px;
    }

写百分比 先算后继承！

body{
        font-size: 20px;
        line-height: 200%;
    }
    p {
        background-color: #ccc;
        font-size: 16px;
    }

到此这篇关于CSS line-height的如何继承的问题的文章就介绍到这了,更多相关CSS line-height继承内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

相关文章

  • css中一些常用的font-size字体单位和line-height详解

    这篇文章主要介绍了css中一些常用的font-size字体单位和line-height的相关知识，给大家提到了px(pixel)像素的一些小知识，本文通过实例代码相结合给大家介绍的非常详细，感
    2020-05-20

  • 深入理解CSS中的line-height的使用

    这篇文章主要介绍了深入理解CSS中的line-height的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学
    2019-08-12

  • 关于css中line-height(行高)设置无效的问题的解决方法

    这篇文章主要介绍了关于css中line-height(行高)设置无效的问题的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-29

  • 深入理解CSS行高line-height与文本垂直居中的原理

    本文详细介绍了CSS行高属性line-height与文本垂直居中的原理，通过本文的介绍相信对大家以后使用line-height和设置文本垂直居中会更加熟练，有需要的可以参考借鉴。下面一
    2016-08-12

  • 浅谈css中vertical-align和line-height的用法

    下面小编就为大家带来一篇浅谈css中vertical-align和line-height的用法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快
    2016-07-27

  • 全面了解css行高line-height的用法

    下面小编就为大家带来一篇全面了解css行高line-height的用法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-25

  • CSS中的line-height行高属性学习教程

    line-height对于页面中字体的行距等排版方面的效果至关重要,这里为大家整理了CSS中的line-height行高属性学习教程,包括line-height的各种取值设定等方面,需要的朋友可以参
    2016-06-06

  • CSS中的line-height行高属性的使用技巧小结

    这篇文章主要介绍了CSS中的line-height属性的使用技巧,文中同时给出了line-height使用中经常出现的文字重叠问题的解决方法,需要的朋友可以参考下
    2016-02-02

  • CSS中行高line-height属性的一些使用技巧

    这篇文章主要介绍了CSS中行高line-height属性的一些使用技巧,包括为每行文本指定不同颜色和文本中间添加线时用到的一些操作方法,需要的朋友可以参考下
    2015-08-21

  • CSS属性探秘系列(三)：line-height

    本文从line-height的定义、line-height的理解、line-height的应用3个方面详细为大家介绍了line-height，非常的详细，有需要的朋友可以参考下
    2014-10-22

最新评论

关注微信公众号

扫一扫