在css中，用的最多的就是px，em，rem三个长度单位，这三个单位的区别就是：

• px是固定的单位长度，一旦设置了就无法随页面的大小而适应改变。
• em是相对长度单位，比px更具灵活性，em的长度是相对于父元素
• rem的长度是相对于根元素，也就是html的字体大小

一、em的使用

1、子元素设置em，大小是取决于父元素字体的大小

2、元素的的width，height，margin，padding用em的话是取决于该元素的font-size的大小

em的继承效果

1、使用em存在继承效果，每个元素都自动继承其父元素的字体大小

2、只要父级元素及上面一直有fontsize为em单位，则会一直继承，但假如自己设置了font-size的单位为px的时候，则会直接使用自己的px单位的值。

看如下代码

<div class="parent">我是父元素<div class="son">我是子元素<div class="sun">我是孙元素</div></div>
</div>
<style scoped>.parent {font-size: 40px;width: 10em; /* 根据规则 此时元素的宽是400px */height: 10em; /* 400px */border: solid 1px blue;}.son {font-size: 0.5em; /* 20px */width: 10em; /* 200px */height: 10em; /* 200px */border: solid 1px crimson;}.sun {font-size: 0.5em;width: 10em;height: 10em;background-color: salmon;}
</style>

效果如下

根据em的继承规则，孙元素的font-size应该是10px，宽和高是100px，但是此时在谷歌浏览器上却不是这么显示的，因为谷歌浏览器的最小字体大小设置是12px，所有小于12px的字体均显示为12px，可以通过css3的transform的scale()方法来解决。

 所以现在孙元素的字体大小为12px，宽和高为100px。可以通过设置一个px大小的div来对比看

<div class="parent">我是父元素<div class="son"><div class="sun"><span>我是孙元素</span></div><div style="width: 100px;height: 100px;background-color: #42b983;float: left"><span style="font-size: 12px"> 12px大小的字体</span></div></div>
</div>

效果

 谷歌浏览器的默认字体是16px

 二、rem的使用

rem是css3新引进的一个度量单位。rem的长度是相对于根元素，既html的长度，通常是给html设置一个标准值，然后其他元素设置rem都是以html的标准值为1单位来设置。

当用rem做响应式时，直接在媒体中改变html的font-size那么用rem作为单位的元素的大小都会相应改变。

比如设置html的font-size为16px，

<div class="parent">我是父元素<div class="son">我是子元素<div class="sun">我是孙元素</div></div>
</div>
<style scoped>.parent {font-size: 3rem;/* 36px */width: 50rem; /* 600px */height: 50rem; /* 600px */border: solid 1px blue;}.son {font-size: 2rem; /* 24px */width: 30rem; /* 360px */height: 30rem; /* 360px */border: solid 1px crimson;}.sun {font-size: 1rem;/*12px*/width: 20rem;height: 20rem;background-color: salmon;}
</style>

效果