深度解析CSS中的单位以及区别

css中有几个不同的单位表示长度，使用时数字加单位。如果长度为0，则可以省略单位。

长度单位可分为两种类型：相对和绝对。

绝对长度

绝对长度单位是一个固定的值，反应真实的物理尺寸，不依赖于显示器、分辨率、操作系统等。具体单位以及解释如下：

1. px像素：一个像素就相当于我们屏幕中的一个小点，屏幕实际就是由很多个像素点构成的，不同显示器像素大小不同，像素越小，显示效果就越好。
2. cm厘米：这个单位大家常见，不解释。
3. mm毫米：这个单位大家常见，不解释。
4. in英寸：1in = 96px = 2.54cm
5. pt：point 。1in = 72pt
6. pc：pica。1pc = 12pt

相对长度

1. %百分比：浏览器根据其父级元素的样式来计算值。父级改变的时候，子级自动改变。
2. em：相对于当前元素的字体大小来计算值，一般浏览器字体大小默认为16px，则2em = 32px
3. rem：rem是根em(root em)的缩写，rem作用于非根元素时，相对于根元素字体大小；作用于根元素字体大小时，相对于初始字体大小。
4. ex：依赖于英文字母小x的高度。
5. vw：vw(viewpoint width)视窗宽度，1vw = 视窗宽度的1%
6. vh：vh(viewpoint height)视窗高度，1vh = 视窗高度的1%
7. vmin：vw和vh中较小的那个。
8. vmax：vw和vh中较大的那个。

一些设置css长度的属性有width、height、margin、padding、font-size、border-width等。

代码示例：

复制代码

{
 font-size:1cm;
 margin:10rem;
 width:10vw;
 height:100vh;
}

复制代码

rem与px的转化

rem是相对于html根元素，意味着，我们只需要在根元素确定一个参考值，我们就知道rem单位与px转化关系。浏览器默认字体大小是16px,所以：1rem = 16px。

举例：

html{ font-size:14px }
div{ width:3rem; height:2.5rem }

把div大小单位换算成px是多少呢？

答案：width:42px;height:35px。