zoukankan      html  css  js  c++  java
  • 理解 line-height

    1.专有名词理解:

      line-height(行高):两条相邻基线之间的距离,有时为了方便,将相邻底线之间的距离作为行高

       

       

      font-size(字体大小):顶线到底线之间的距离

      行间距:行高减去字体大小就为行间距,会平均分成两部分,顶部一份,底部一份

    2.行间距的理解

      (1)line-height为固定数值时:100px

        

    div{
        border: 1px solid red;
        line-height: 100px;
    }
    p{
        font-size: 30px;
        border: 1px solid black;
    }
    
    
    <div>
        <p>段犇</p>
    </div>

    子元素可以继承父元素的行高!

    div{
        border: 1px solid red;
        line-height: 100px
    }
    
    <div></div>

    若只设置行高,而没有子元素填充,只会是一条线

    div{
        border: 1px solid red;
        height: 100px
    }
    
    <div></div>

    注意height与line-height 的区别

      (2)line-height的值为百分数时:

      

    div{
        font-size:50px;
        border: 1px solid red;
        line-height: 150%;
    }
    p{
        font-size:50px;
        border: 1px solid green;
    }
    <div>
        <p>段犇</p>
    </div>

    若父元素的line-height是百分数,则该父元素的行高为:line-height的值 乘以 父元素字体的大小,子元素会继承父元素的行高

    若父元素未规定字体大小,而只规定行高,则会用默认的字体大小值 乘以 line-height的值

      (3)line-height的值如1.5的无单位的小数

       

    div{
        border: 1px solid red;
        line-height: 1.5;
    }
    p{
        font-size:50px;
        border: 1px solid green;
    }
    
    <div>
        <p>段犇</p>
    </div>

    当line-height的值无单位时,如1.5,则行高为:父元素的line-height值 乘以 子元素的字体大小

    总结:通过上面的例子我们得知,文本之间的空白部分,不仅与行高(line-height)有关,还与字体(font-size)有关,

         第一种与第二种实质上是一样的,都是只与父元素有关;而第三种必须结合父元素与子元素

      

  • 相关阅读:
    Encrypted Handshake Message
    RSAParameters Struct
    What if JWT is stolen?
    What's the difference between JWTs and Bearer Token?
    RSA Algorithm Example
    第18届Jolt大奖结果公布
    Ruby on rails开发从头来(windows)(三十六) 调试技巧
    Ruby on rails开发从头来(四十二) ActiveRecord基础(主键和ID)
    YouTube开放基础技术架构 让用户建自家YouTube
    Ruby on rails开发从头来(四十) ActiveRecord基础(Boolean属性)
  • 原文地址:https://www.cnblogs.com/DB-IT/p/8473950.html
Copyright © 2011-2022 走看看