彻底弄懂css中单位px和em，rem的区别

所有现代浏览器中，默认网页字号是16px大小，默认1em=16px;那么0.75em=12px;(16*0.75);

但是，你定义了一个body{font-size:32px;}，这时1em=32px;假如你需要一个16px的字体，就要写：font-size: 0.5em;

再然后，em单位很操蛋的是子元素的字号是根据上一级父元素的字号来算的，看例子：

body{font-size: 32px;}/*定义了1em=32px*/
div{font-size: 0.5em;}
div p{font-size: 0.75em;}


    我是32px大小
    

        我是16px大小，因为定义了div{font-size: 0.5em;}即1em的一半
        
那么问题来了，这行p的字号定义成了0.75em，他不是body定义的32px的0.75，而是父div字号16px的0.75

    

如果p里面再嵌套一个span元素，你要定义他的字号大小为24px，你先要算出目前p的字号实际大小为12px，然后乘以2才能得到span的正确字号，即：span{font-size: 2em;}

这样嵌套一多了，算子元素的字号是很不直观的，不知道css的这个设计是出于什么目的或是设计时是不是没注意到这个问题会带来计算上的麻烦，于是后来又有了rem单位。

rem单位就简单多了，只针对html根元素，比如body里面你定了font-size: 24px;(1em=24px;)，那么无论你在哪个子元素上，你想要个12px的字体，只用定义font-size: 0.5em;即可，你不用去担心它上级元素的字号是16px还是24px;