Css中有很多单位用于描述元素的大小、位置等属性,其中em是相对单位中的一种。em的计算逻辑是相对于元素字体大小而言的。 p { font-size: 16px; /* 1em = 16px */ m
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单位可以使得元素的布局更具有可扩展性和动态性。
粉丝
0
关注
0
收藏
0