搞懂em

最新推荐文章于 2024-07-03 12:22:43 发布

原创最新推荐文章于 2024-07-03 12:22:43 发布 · 982 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #em #字体

css 专栏收录该内容

14 篇文章

订阅专栏

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