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值来算的。