搞懂em

     shift,一下午就是在为了搞懂em,难怪会觉得学习效率这么低,不过现在倒是觉得值了,因为有所得。。。。。

     以前一直喜欢用px,觉得比较精确,最大的优点在于不用拿着计算器在那算呀算,所以国内的90%以上的网页设计师都喜欢用px,而国外的大多数都是用em。但是ie无法调整那些使用px为单位的字体,而目前使用ie的还是多之又多,况且目前流行的弹式布局用的就是em。所以我们不得不好好的搞懂这个em。

   em的特点:1.它的值不是固定的

                       2.它会继承父级元素的字体font-size的大小。

之所以说它不是固定的值,是因为它的值的计算得根据父级元素来计算,所以算数不好的你得好好准备个计算器了。浏览器默认的字体大小是16px,即1em=16px,如果在body上不设置font-size,那么默认的父级元素body的字体大小就是16px。还是举例好了:

<body>
     <div>some text</div>
</body>
div{
   font-size:1.2em;
}
div的父元素的font-size值为浏览器默认值16px,那么div的font-size为:16px*1.2em=19.2em。

在看一个设置了body字头大小的:

<body>
    <div>some more text</div>
</body>
html{
font-size:75%;//正对ie下无法实现弹式布局的改进
}
body{
font-size:12px;
}
div{
font-size:1.5em;
}
这样div的字体大小为:1.5em*12px=18px;

em的继承只是对于字体而言,而其他的属性,如width,height,line-height,margin,padding等而言,其em值就没有继承可言。它们的计算是相对于该元素的字体大小来计算的,如果该元素没有设置字体大小,那么该元素的字体大小先继承父元素的字体大小,然后再计算其他属性上带有em的值。

<body>
     <div>some more more text<.div>
</body>

html{
  font-size:100%;
}
body{
  font-size:16px;
}
div{
  font-size:1.2em;//1.5*16=24px
  padding:1.2em;//1.2*24=28.8px
  margin:1em;//1*24=24px
}
简单来说就是:

1、默认1em=16px

2、font-size中的em是相对于父元素font-size的

3、元素其他属性(除了font-size)中的em是相对于本元素的font-size值来算的。




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值