em表示什么长度单位_html 常见的长度单位”px em pt” 简介说

摘要:

下文讲述常见的长度单位”px em pt”功能说明，如下所示:

px、pt、em单位简介说明

px:像素，相对长度单位，像素(px)是相对于显示器屏幕分辨率而言的国内推荐；

em:单位名称为相对font-size的长度单位。相对于当前对象内文本的字体尺寸，国外使用比较多

pt:点

例:

1、 ：

Width:80px 宽度是80像素

Width:80pt 宽度是80点

Width:80em 宽度是80相对长度

例:

使用px pt em设置浏览效果

.maomao-px{ font-size:16px}

.maomao-pt{ font-size:16pt}

.maomao-em{ font-size:1em}

www.maomao365.com pt px em测试

www.maomao365.com pt px em测试

www.maomao365.com pt px em测试

pt_px_em举例说明

从以上运行效果上，我们可以看出px pt em之间的对比。

px 同em之间换算

浏览器默认字体高度为16px,

所以默认浏览器的字体高度为1em

那么我们可以得出

12px =0.75em;

10px =0.625em;

注意事项:

我们经常看见css样式中设置

*{font-size=62.5%}

其实这个设置的意思为:font-size的长度为浏览器默认高度的百分之62.5%及16px*62.5% =10px;

由于改变了font-size的默认高度，那么1em= 62.5%*16px =10px;

如果我们在后续的文本中定义font-size为12px,则应该使用font-size:1.2em (1.2em = 12px/10px);

em单位的相关说明

em值是一个相对值，是相对font-size为一个单位的值

em值可随着font-size中的初始值进行变化

如果css中需使用em作为单位，我们首注意以下两点:

1.声明font-size长度，例:font-size=62.5%;

2.如果font-size设置为62.5%后，将px转换为em时，先除以10，然后再将后面的单位修改为em