在我们对某个盒子的高度、宽度进行定义的时候,我们常见用到的单位是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指定的对象是父元素。这里也是一个误区,切记!!!