px:html中css的一个绝对单位;
em:相对于父元素的字体大小的单位(1em=父元素的font-size);
rem:相对于根元素的字体大小的单位(1em=根元素的font-size)。
注意:em和rem都是相对单位。
下边用一个简单的例子区别px,em,rem
例:
<style>
html{font-size: 20px;}
div{font-size: 2em;}
.s1{
font-size: 2em;
}
.s2{
font-size: 2rem;
}
</style>
</head>
<body>
<div>
<span class="s1">国</span>破山河在<span class="s2">城</span>春草木深
</div>
</body>
其中html为根标签,div为s1,s2的父标签,所以效果图如下: