HTML中CSS关于em取值问题请教?

html-css017

HTML中CSS关于em取值问题请教?,第1张

width:10em按照字体大小的14px*10=140px。

padding:0.25em;按照字体大小的14px*0.25=3.5px。

margin:0.5em auto同上

em是要依靠父元素的值来计算的

1、字体计算公式依旧

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

2、其它属性的计算公式需要换成

1 ÷ 元素的font-size × 需要转换的像素值 = em值

1、浏览器的默认字体大小是16px

2、如果元素自身没有设置字体大小,那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值,我们都可以按下面的公式来计算

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

3、这一种千万要慢慢理解,不然很容易与第二点混了。如果元素设置了字体大小,那么字体大小的转换依旧按第二条公式计算,也就是下面的:

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

那么元素设置了字体大小,此元素的其他属性,如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算:

1 ÷ 元素自身的font-size × 需要转换的像素值 = em值

这样说,不知道大家理解了整明白了没有,如果没有整明白,可以回过头来看上面的一个实例。

推荐工具:

最简单的PX和EM转换工具pxtoem.com

em单位名称为相对长度单位

rem单位名称为相对root长度单位

rem才是基于根节点来算的

em是当前的父级对象的值来算的

.1=0.1 1e3=1000