如何区分px,em,rem
px
在平常的用法中，相信大家更习惯用px来做单位，比如
font-size:15px;
height:200px;
width:200px;
所以对于px,我们都很熟悉。px的单位名称是像素，是一个固定的长度单位，不随着其他元素的变化而变化；所以，我想要重点说的是em 和rem;
em
em是相对单位长度，是用来设置字体大小尺寸的，它是相对于父级元素的单位，会随着父级元素的属性变化而变化；若是当前这个属性有设置字体属性，就以当前自己字体属性的大小为标准，若是没有设置就以父级元素的字体大小尺寸为标准；比如：
<div>
我是父级元素
<p>
我是子元素
</p>
</div>
div{
font-size:40px;
height:10em; // 400px;
width:20em; // 800px
}
p{
font-size:0.5em; // 20px
height:10em; // 200px;
width:20em; // 400px
}
很清楚可以看出，p元素作为子元素font-size=0.5em，所以是0.540px = 20px;又因为p元素自己本身设置了font-size.,所以height化作px等于1020=200px;width等于20* 20=400px; 若是p元素自己本身没有设置font-size属性，这时候p元素内1em等于父元素的字体的大小为40px,如下：
p {
height:10em;// 400px;
width:20em;// 800px;
}
rem
rem是css3新增的一个相对长度单位，它的出现是为了解决em的缺点，因为em是相对于父元素字体大小的，若是父元素字体大小改变，那子元素就要全部都重新计算，rem的出现就是解决这个问题;
rem可以理解为root-em，所以他是相对于根元素的，所以只要在html标签上设置字体大小，文档中的字体大小都会以此为标准。比如：
<html>
<div >
<p>
<span></span>
</p>
</div>
</html>
html {
font-size:40px;
}
div{
height:400px;
width:400px;
}
p{
font-size:0.5rem;// 20px
height:10rem;// 400px;
width:10rem;// 400px;
}
span {
font-size:0.5rem; //20px;
height:5rem;// 200px;
width:5rem;// 200px;
}
很明显，以rem做单位，都以根元素html里设置的font-size:40px;为基数也就是1rem=40px;来计算了；
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
