zoukankan      html  css  js  c++  java
  • CSS中的长度单位

    CSS中常用的长度单位有px(像素),em%(百分比)。

    px

    像素:指的是显示器上的小点,CSS规范中假设90像素=1英寸。实际浏览器会使用显示器的实际像素值,网页设计中像素使用的比较频繁。

    em

    em就是font-size的值,假如font-size=14px,那么1em=14px,假如font-size=18px,那么1em=18px

    p {
        font-size: 16px;
        text-indent: 2em;
    }
    

    如上代码就是p元素的内容缩进两个字体大小的距离,即32px。
    注:如果一个元素的font-size单位设置为em,此时计算标准以该元素的父元素的font-size为基础。示例如下:
    HTML代码

    <body>
        <p>这是一个<span>示例</span></p>
    </body>
    

    CSS代码

    <style type="text/css">
        p {font-size: 16px;}
        span {font-size: 0.6em;}
    </style>
    

    效果如下:

    效果中的文字示例的字体大小计算为:16*0.6=9.6px

    %

    <style type="text/css">
        p {
            font-size: 16px;
            line-height: 120%;
        }
    </style>
    

    如上代码中line-height的值得计算为:16*1.2=19.2px
    另外

          font-size是可以继承的。即假如改变一个元素的字体大小,可能会导致其子元素字体大小成比例变化。假如把body元素的font-size设置为200%,那么页面中所有元素的文本都会增大一倍。
          出现这种效果,是因为浏览器样式表在设置所有元素的字体大小时,使用的都是相对单位em,例如:h1是2em,h2是1.5em。默认情况下,1em=16px,h1就是32px,h2就是24px。
          此时如果把body的字体大小设置为20px,就重新设置了基准大小,h1就是40px,h2就是30px,但是那些以像素为单位设置字体大小的元素,不会继承body的字体大小,这些元素会按照自身设置的大小显示。
    

    本文作者:温茶又折花

    本文链接: https://www.cnblogs.com/dyfblogs/p/15053869.html

    转载文章请注明作者和出处,谢谢!
  • 相关阅读:
    夏普比率(Sharpe Ratio)
    资管产品与信托产品区别
    通道业务是什么业务?怎么做到为银行做资产从表内到表外的流动性搬运?
    什么是MBS,ABS和CDO
    Oracle的OFA架构
    oracle-TNS是什么?
    Windows 如何在cmd命令行中查看、修改、删除与添加环境变量
    oracle的sqlnet.ora,tnsnames.ora,listener.ora三个配置文件
    linux下安装oracle
    金融人物
  • 原文地址:https://www.cnblogs.com/dyfblogs/p/15053869.html
Copyright © 2011-2022 走看看