px、%、rem、em的理解

在我们对某个盒子的高度、宽度进行定义的时候，我们常见用到的单位是px、%、rem、em。

px：px绝对是我们小伙伴最最常用的一种单位，也是最简单的一种。px（像素）是一种规定好的单位，无法动态的去变化。

%:：%也是一种常用的单位，就是根据父元素去变化，不断去遍历父元素，直到在某个父亲的父亲的。。中找到一个确切的值，从而确定该元素的值。（在这里我们需要理解一下页面的构造问题，下次我会对这个专门细讲一下）

rem：rem也是一种比较容易理解的单位，就是根据 “根元素” 去确定值，比如在html中设置 font-size:20px 那么在该元素中 height: 1rem => height: 20px；或者 font-size: 1rem => font-size: 20px。这个还是比较容易理解的。

em: 经常会有小伙伴理解错误，误认为是根据 “父元素” 去确定值，比如

<div id="father">
	<p>你好</p>
</div>

<style>
	body {
		font-size: 16px;
	}
	#father{
		font-size: 20px;
	}
	p {
		height: 1em;
		font-size: 1rem;
	}
</style>

在代码中，有些小伙伴认为p标签的高度就是20px，其实是错误的。应该是16px才对，因为em是指本身元素的font-size的值，由于p的font-size属性的值是继承根元素html，所以p元素的高度应该是16px才对。

这里为啥经常会有小伙伴理解错误了，是因为font-size属性在不声明的时候，默认是继承父元素，所以有些小伙伴一看元素在不声明font-size的情况，他的height:1em。看效果发现是和父元素一致，误认为em指定的对象是父元素。这里也是一个误区，切记！！！