[分享]css中 em和px代表什么意思

在CSS样式中，常常会用到“em”和“px”来表示长度单位。那么它们到底代表什么意思呢？

 em {
        font-size: 1.2em;
        padding: 0.5em;
    }
    
    px {
        font-size: 12px;
        margin: 10px;
    } 

在CSS中，em是相对单位，表示相对于当前元素的字体大小。比如说，如果当前元素的字体大小为16px，那么1em就等于16px。

举个例子，如果我们给一个p标签设置了字体大小为16px，然后在p标签内部再嵌套一个span标签，如果我们给span标签设置字体大小为1.2em，那么它的字体大小实际上就是16px * 1.2 = 19.2px。

而相对于em，px则是绝对单位，表示一个固定的长度。无论当前元素的字体大小是多少，1px都等于屏幕上的一个像素。因此，我们通常用px来表示一些绝对长度，比如边框大小、外边距、内边距等等。

当然，使用em也有它的好处。因为em是相对单位，所以如果我们在网页中同时使用了相对单位和绝对单位，那么当用户调整浏览器的字体大小时，相对单位会自动按比例调整，而绝对单位则会保持不变，这样可以在一定程度上保证了页面的可读性。