<div class="third-div"></div>
以上代码将会展示的依次是紫色-黑色-红色的div，大小分别是100px的1.5倍，1倍，0.5倍。
em 和 rem 是什么
1em等于当前的字体尺寸，数值的改变意味着字体大小的调整。em 有继承这个特性，也就是说，外部父元素定义了字体的em大小，内部子元素会继承这一属性的样式。
rem = root em 。顾名思义，root即根部的，顶部的。也就是根部的em，这个根部指的是HTML根元素。所以rem的大小是针对HTML根元素的大小做字体的相对大小的调整。
代码：
CSS Code复制内容到剪贴板
<style>
body{
font-size: 12px;
}
/*html{
font-size: 12px;
}*/
.first-div{
width: 200px;
height: 100px;
font-size: 1em;
float: left
}
.second-div{
width: 200px;
height: 100px;
font-size: 2em;
float:left
}
.third-div{
width: 200px;
height: 100px;
font-size: 1rem;
float:left
}
.fourth-div{
width: 200px;
height: 100px;
font-size: 2rem;
float:left
}
</style>
<div class="first-div">Hello World</div>
<div class="second-div">Hello World</div>
<div class="third-div">Hello World</div>
