夏日的草原，早晨空气格外清新，我缠着父亲在草原上漫步。幽幽的草香迎面拂来，红艳艳。朝阳正从地平线上冉冉升起，为辽阔的草原镀上一层金色。草叶上的露珠，像镶在翡翠上的珍珠，闪着五颜六色的光华。我看到草丛中夹着许多粉红色、白色、黄色或是蓝色的不知名的花，把草原装扮得十分美丽。
在CSS中px、em、rem都是计量单位都能表示尺寸，来标识字体的大小，但是他们之间是有所不同的，各有各的优缺点，下面就大略的说一下。
css px
1、px：像素，相对于显示器屏幕分辨率而言的。
2、其作为单位是固定不变的，不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。
css em
1、em：其值是不固定，只会继承父元素的字体大小。
2、如果其父亲的字体改变，其也会相应的进行改应
css rem
1、rem：是css3中新增的相对单位。
2、其继承html根元素的字体大小。
3、可以通过修改根元素字体大小就来调整其大小
4、浏览器的字体在其未定义之前默认为 16 px
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.em{
width: 10em;/* 10em = 8 * 10 */
height: 10em;
background-color: red;
}
.rem{
width: 10rem;/* 10rem = 16 * 10 */
height: 10rem;
background-color: blue;
}
</style>
</head>
<body>
<div class="box" style="font-size: 8px;">
<div class="em">em</div>
<div class="rem">rem</div>
</div>
</body>
</html>运行结果：
说明：
(1)、div em 的大小为 80*80，其是根据 class 为 box 定义的字体大小来计算的。 8*10=80
(2)、class 为 rem 的 div 为 160*160，其是根据HTML的字体大小来计算的(html字体大小为16)
本文css中px、em、rem三者的概念与区别到此结束。不曾扬帆，何以至远方。小编再次感谢大家对我们的支持！
