html中px em pt区别介绍

 HTML 不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

px、em、pt之间的区别:

一、代表单位不同。

px代表的是像素单位,em代表的是相对单位,pt代表的是绝对单位。

二、单位长度不同

pt是72分之一英寸,px是数字化图像长度单位,em是字符宽度的倍数。

下面我们来看一下HTML中的长度单位px、em、pt。

  • pt (point,磅):是一个物理长度单位,指的是72分之一英寸。

  • px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。

  • em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。

html单位简短介绍:

  • Px 像素Pixel;相对长度单位。

  • Pt 点(Point);绝对长度单位

  • Em 相对长度单位,这里em与html 标签的"EM"拼写完全相同,而这里em作为单独文本单位。

单位换算:

任意浏览器的默认字体高度16px(16像素)。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

你可能感兴趣的:(HTML)