CSS中强大的EM - Githubissues

HanSummer commented 7 years ago

HanSummer commented 7 years ago

总结

长篇介绍了一大堆，唯一想告诉大家的是以下几点

1、浏览器的默认字体大小是16px

2、如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值，我们都可以按下面的公式来计算

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

3、这一种千万要慢慢理解，不然很容易与第二点混了。如果元素设置了字体大小，那么字体大小的转换依旧按第二条公式计算，也就是下面的：

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

那么元素设置了字体大小，此元素的其他属性，如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算：

1 ÷ 元素自身的font-size × 需要转换的像素值 = em值

这样说，不知道大家理解了整明白了没有，如果没有整明白，可以回过头来看上面的一个实例。

HanSummer commented 7 years ago

1em总是等于父元素的字体大小

HanSummer commented 7 years ago

所以完美的设置是： body {font-size:1em;}

可是在那个没人爱的IE底下，“em”会有一个问题存在。调整字体大小的时候，同样会打破我们的弹性布局，不过还好，有一个方法可以解决：

html {font-size: 100%;}

HanSummer commented 7 years ago

HanSummer / awesome-web