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 的区别