px 和 em 是用来表示元素大小的单位,在 CSS 中经常被使用。
px (pixel) 是像素单位,表示屏幕上的一个点。它是一个绝对单位,表示一个固定的大小。例如,一个宽度为 200px 的元素将始终显示为 200 个像素宽。
em 是相对单位,根据继承它的父元素的字体大小来计算实际的大小。默认情况下,1em 等于父元素的字体大小。例如,如果父元素的字体大小为 16px,那么 1em 将等于 16px。如果一个元素的字体大小为 2em,那么它将等于父元素字体大小的两倍。
下面是一些代码示例:
<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 的区别。