星空网 > 软件开发 > 网页设计

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+

em的理解
 



 






原标题:em的理解

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

【Shopee新手开店】卖家后台管理及设置:https://www.goluckyvip.com/news/1197.html
荷兰、德国和南非,中国逆变器的最大出口市场。欧洲新能源产品存储海外仓:https://www.goluckyvip.com/news/11970.html
TikTok再发力二手奢侈品电商,与Entrupy合作鉴定真伪:https://www.goluckyvip.com/news/11971.html
Tiktok自动鸡舍门它来了!美国站点小心踩雷哦!:https://www.goluckyvip.com/news/11972.html
亚马逊推出新款仓库机器人,提高包裹分拣和交付效率:https://www.goluckyvip.com/news/11973.html
亚马逊热卖!TikTok带火多款家居产品!:https://www.goluckyvip.com/news/11974.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流