详解CSS中的几种长度px、em、pt

关于CSS中的长度单位，常用的有px、em、pt等几种。下面我们将分别介绍这些长度单位的含义和使用方法。

像素(px)

像素是CSS中最常用的长度单位，1px表示页面上的一个像素点。这种长度单位相对于设备分辨率而言，并不是固定的。在处理高分辨率屏幕时，1个CSS像素点对应的可能是2、3、4个物理像素。

示例1：设置字体大小为16px

div{
  font-size: 16px;
}

示例2：设置元素宽度为200px

div{
  width: 200px;
}

相对长度单位

相对长度单位是相对于其他某个值的长度，最常用的有em、rem、vh、vw等。相对长度单位的值不是固定的，而是随着外部值的变化而变化。

em

em是相对于当前元素的字体大小的长度单位。例如，如果一个元素的字体大小设置为16px，那么1em就会等于16px。如果在一个16px大小的元素中嵌套另一个元素，并将字体大小设为2em，则该元素的字体大小为32px。

示例1：设置字体大小为16px，并在此基础上设置另一个元素的字体大小为2em

div{
  font-size: 16px;
}
span{
  font-size: 2em; /*等于32px*/
}

rem

rem是相对于根元素(html元素)的字体大小的长度单位。默认情况下，根元素字体大小为16px，因此1rem等于16px。如果在根元素中设置字体大小为20px，那么1rem就会等于20px。

示例2：设置根元素字体大小为20px，然后设置一个元素的宽度为10rem

html{
  font-size: 20px;
}
div{
  width: 10rem; /*等于200px*/
}

绝对长度单位

绝对长度单位是固定的长度单位，不随其他值的变化而变化，常用的有pt、mm、cm等。

pt

pt是英寸长度单位中的一个，等于1/72英寸，约为0.353毫米。这种长度单位一般用于打印，而不适用于屏幕显示。

示例1：将文本颜色设置为红色，字体大小设置为12pt

div{
  color: red;
  font-size: 12pt;
}

mm

mm是毫米的缩写，与pt类似，常用于打印，不适用于屏幕显示。

示例2：将元素宽度设置为50毫米

div{
  width: 50mm;
}

总结：以上就是CSS中常用的长度单位，每种长度单位都有其适用场景和注意点，根据实际需要进行选择，才能达到更好的效果。