html中的长度单位em,前端常用长度单位（px，em，rem，pt）介绍

CSS中有不少属性是以长度作为值的。盒模型的属性就是一些很明显的值属性：width、height、margin、padding、border。除此之外还有很多其他的CSS属性的值同样也是长度值，像偏移量(offset)、box-shadow的大小或者字体的大小、间距等。CSS中有哪些长度单位可以作为属性的值呢？这样的单位有很多。

绝对长度单位

px

.wrap {

400px;

}

像素或许被认为是最好的“设备像素”，而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。

像素应该是设备和显示器中显示趋于一致，但是他越来越不正确。比如：在迷你ipad上显示的网站和ipad本身显示的网页是一样的，意味着如果那些设置的像素值标准化后就超出了窗口的范围

在web上，像素仍然是典型的度量单位，很多其他长度单位直接映射成像素，最终，他们被按照像素处理，javascript语言里的单位就是使用的像素。

in

.wrap {

4in;

}

英寸是一个物理度量单位，但是在CSS领域，英寸只不过被直接映射成像素罢了。欢迎大家在评论中提供使用英寸做单位的实例，我会把这些实例添加到这里的，但是，到目前为止我还没有见过哪个实例用的是英寸，当然也没见过使用下面那些物理度量单位的实例。

1in == 96px

cm

.wrap {

20cm;

}

对于世界上大多数的人来说，厘米是比较熟悉有用的物理度量单位。它也映射成像素