zoukankan      html  css  js  c++  java
  • em的理解

    em

    • 版本:CSS1

    说明:

    自己的理解:
    注意地方:
    • 浏览器默认大小为16px.
    • 谷歌浏览器最小字体为12px.
    • font-size;有继承性。
    判断步骤:
    【】看该元素本身有没有设置字体大小:
    有:那么,boder、width、height、padding、margin、line-height”等值,都是相对字体大小的。
    font-size*em值=等于实际需要值。 
     
     
     
    1. (魔芋例子:
    2. <h1>天空</h1>
    3. h1 {font-size:10px;margin:2em;}    //那么margin的值为20px;
    4. )
     
     
    • 如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(注意有些标签自带font-size,比如h1~h6)
     
    []如果是自带font-size的。那么,需要计算两次。
    1. body {font-size:10px;}
    2. h1 {margin:2em;}//此时,h1的font-size为:2em。计算为body的font-size*2em.然后为font-size:20px。margin再次计算20px*2em=40px。此时,margin:40px;
     
     
    【】没有设置,看父元素。
    1. body {font-size:20px;}
    2. p {margin:3em;}  //此时,由于最小字体为12px.那么20px*3em = 60px;
     
     
     
    如果,文字的大小,没有设置(自己人为设置),那么就是相对于body的字体大小。
    所以,font-size:2em. 就是32px.
     
    1.  body {font-size:20px;}
    2.     .bo {font-size:2em;color:red;}
    3.     p {line-height:3em;}// line-height为120px
     

    兼容性:

    • 浅绿 = 支持
    • 红色 = 不支持
    • 粉色 = 部分支持
    IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
    6.0+ 2.0+ 4.0+ 3.1+ 3.5+ 3.2+ 2.1+ 18.0+
     





  • 相关阅读:
    pthread 的 api 分类
    移动端网页实现拨打电话功能的几种方法
    阿里云ECS服务器活动99元一年,最高可买三年
    jQuery 文档操作
    [Err] 1062
    中国标准城市区域码
    json和jsonp的使用区别
    xshell评估过期解决办法
    xshell评估期已过怎么办
    git之本地仓库关联远程仓库
  • 原文地址:https://www.cnblogs.com/moyuling/p/4955937.html
Copyright © 2011-2022 走看看