px，em，rem，%区别_px em %-CSDN博客

本文链接：https://blog.csdn.net/weixin_42496905/article/details/118916421

px，em，rem，%区别

px：绝对单位，像素，代表屏幕中每个点，比如，电脑分辨率为的1024px×768px表示，屏幕水平方向由1024个点和垂直方向上由768个点组成。

em：相对单位，相对父元素px

rem：相对单位，em改良而来，相对根元素px

%：相对单位，相对父元素px

px

<span style="font-size: 12px;">12px</span>
<span style="font-size: 24px;">24px</span>
<span style="font-size: 32px;">32px</span>

输出结果如下：

在这里插入图片描述

现在我们来看一个嵌套的例子，想想输出parent、child1和child2文字大小是否一致？

<div class="parent" style="font-size: 16px;">
    parent
    <div class="child1" style="font-size: 16px;">
        child1
        <div class="child2" style="font-size: 16px;">
            child2
        </div>
    </div>
</div>

输出结果如下：

在这里插入图片描述

答案是肯定的，因为px是绝对单位，它代表的是屏幕上的点。

em

现在我们把上面例子的px改为em，想想输出parent、child1和child2文字大小依旧是否一致？

<div class="parent" style="font-size: 2em;">
 parent
    <div class="child1" style="font-size: 2em;">
     child1
        <div class="child2" style="font-size: 2em;">
         child2
        </div>
    </div>
</div>

输出结果如下：

在这里插入图片描述

显而易见，输出的parent、child1和child2文字大小明显不一样，虽然他们的大小都是2em，但em是相对单位，child1相对上一级parent文字大小大了2倍，而child2又相对他的上一级child1文字大小大了2倍

rem

如果可以理解上面我说的em，那么rem便不难理解了。em和rem的区别在于，em是相对一每一级他的上级而增加，而rem则相对根标签body标签而增加。我们看下面例子

<div class="parent1" style="font-size: 2rem;">
    parent1
    <div class="child1" style="font-size: 2rem;">
        child1
    </div>
</div>

<div class="parent2" style="font-size: 3rem;">
    parent2
    <div class="child2" style="font-size: 3rem;">
        child2
    </div>
</div>

输出结果如下：
在这里插入图片描述

我们可以看到parent1和child1虽然为父子级关系，但他们大小一样；而parent1和parent2同为body下的兄弟，他们的rem值不同，字体大小也不同，由此可见，rem是相对body根元素的相对单位。

现在我们试着把child1和child2的字体大小改变一下，想想他们大小会发生怎样改变。

<div class="parent1" style="font-size: 2rem;">
        parent1
        <div class="child1" style="font-size: 3rem;">
            child1
        </div>
    </div>

    <div class="parent2" style="font-size: 3rem;">
        parent2
        <div class="child2" style="font-size: 4rem;">
            child2
        </div>
    </div>

输出结果如下：

在这里插入图片描述

这样，就更能正面rem是相对根元素而改变的值了

%

最后我们来看%，%和em大同小异，1em=100%

<div class="parent1" style="font-size: 200%;">
    parent1
    <div class="child1" style="font-size: 200%;">
        child1
        <div class="child1" style="font-size: 200%;">
            child1的儿子
        </div>
    </div>
    <div class="child1" style="font-size: 200%;">
        child1的兄弟
    </div>
</div>