[分享]Css中em计算逻辑

Css中有很多单位用于描述元素的大小、位置等属性，其中em是相对单位中的一种。em的计算逻辑是相对于元素字体大小而言的。 p { fontsize: 16px; / 1em 16px / margi...

Css中有很多单位用于描述元素的大小、位置等属性，其中em是相对单位中的一种。em的计算逻辑是相对于元素字体大小而言的。

 p { 
        font-size: 16px; /* 1em = 16px */
        margin-top: 1.5em; /* 1.5em = 24px */
    } 

在上述代码中，p元素的字体大小为16像素，因此1个em就等同于16像素。当p元素的margin-top属性值为1.5em时，实际上相当于上边距为24像素，因为1.5em乘上16像素等于24像素。

需要注意的是，em单位的计算基准不是固定的。如果父元素的字体大小不同于子元素，那么子元素的em单位值也会相对于父元素的字体大小进行计算。

 body { 
        font-size: 18px;
    }
    h1 {
        font-size: 2em; /* 2em = 36px */
    } 

在上述代码中，body元素的字体大小为18像素。假如h1元素的字体大小为2em，根据计算逻辑，h1元素的字体大小就会被设置为36像素，因为2em乘上18像素等于36像素。

因此，em单位的计算逻辑非常灵活，使用em单位可以使得元素的布局更具有可扩展性和动态性。