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