zoukankan      html  css  js  c++  java
  • CSS深入理解之line-height

    两行基线的距离

     

    内联元素p元素的高度是由行高决定的

    没有两行哪来的行高?

    由于继承性 行高无处不在

    内容区域高度只与字体大小相关

    simSam字体下

    line-height = 字体大小+行间距

     行高支持一下属性值:

    假如当前font-size12px

    normal  默认值 与浏览器和字体相关 crome浏览器下  normal值= 字体大小/100    = 0.12

    inherit

    length 12px 直接设置

    number  当设置为3 则 行高为36px

    percent  50%    12*50%=6px

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .Number{
                font-size:100px;
                line-height: 150%;/*100px*150%=150px 此方法获取的行高将继承给子元素 30px*/
            }
            .Number>p{
                font-size:44px;
            }
            .Percent{
                font-size:100px;
                line-height: 1.5;/*100px*1.5=150px 在子元素当中还会计算一次*/
            }
            .Percent>p{
                font-size:44px;/*44px*1.5=66px */
            }
        </style>
    </head>
    <body>
    <div class="Number">
        <p>根据自身文字大小计算行高</p>
        <p>根据自身文字大小计算行高</p>
    </div>
    <span style="display: block;100%;height:1px;background:red"></span>
    <div class="Percent">
        <p>根据自身文字大小计算行高</p>
        <p>根据自身文字大小计算行高</p>
    </div>
    </body>
    </html>

  • 相关阅读:
    php+redis简易消息队列
    Linux关闭selinux的方法(临时关闭和永久关闭)
    Linux清理buff/cache
    Centos禁止ping的设置方法
    浅谈mysql触发器
    mysql中left join right join inner join用法分析
    mysql主从配置详解(图文)
    mysql中的几种判断语句
    mysql锁表处理方法
    Mysql里的order by与索引
  • 原文地址:https://www.cnblogs.com/webcyh/p/11333140.html
Copyright © 2011-2022 走看看