css中px和em的区别

BJYXSZD-91852024-01-27 21:41

px 和 em 是用来表示元素大小的单位，在 CSS 中经常被使用。

px (pixel) 是像素单位，表示屏幕上的一个点。它是一个绝对单位，表示一个固定的大小。例如，一个宽度为 200px 的元素将始终显示为 200 个像素宽。
em 是相对单位，根据继承它的父元素的字体大小来计算实际的大小。默认情况下，1em 等于父元素的字体大小。例如，如果父元素的字体大小为 16px，那么 1em 将等于 16px。如果一个元素的字体大小为 2em，那么它将等于父元素字体大小的两倍。

下面是一些代码示例：

html 复制代码

<style>
    .parent {
        font-size: 16px;
    }
    .child {
        width: 200px;
        height: 1em;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>

在上面的例子中，.parent 元素的字体大小为 16px，所以 .child 元素的高度将等于 16px。.child 元素的宽度设置为 200px，所以它将始终显示为 200 个像素宽。

希望这个例子能帮助你理解 px 和 em 的区别。