详解css中的单位

我看过的一些文章和《css权威指南》都没有太简洁明了的让我们理解css中的单位，反而css权威指南这本书还将简单问题复杂化了很多，故而我自己总结一下css中的单位。

---

绝对单位和相对单位

我发现《css世界》和《css权威指南》里面对于绝对单位和相对单位的描述有出入，故而先介绍一下什么是绝对单位以及什么是相对单位。

绝对单位：比如，某公司规定员工工作日每天需要工作8小时，这个“小时”就是绝对单位，因为8小时是固定长度的。

相对单位：比如，某公司规定员工的工作时长需要符合手头工作量，工作量多就得加班，工作量少当然也不可能提前下班，这里“工作时长需要符合手头工作量”就是个相对单位，因为这个工作时长是相对于工作量而言的，是不确定的。

css中的单位

css中的绝对单位就是单位配合数值后所确定的元素视觉大小是绝对的，而相对单位就是单位加上数值后表示的元素视觉大小是不确定的。

绝对单位有：pt,pc,in,cm,mm

相对单位有：em,ex,px,rem,vw,vh,vmin,vmax,%,ch

px

相对单位，这个单位是网上文章中错误最多的单位，有的文章说是相对单位，有的说是绝对单位。其实px是相对单位，代表1像素，一个像素的大小是不确定的，比如：有两台电脑，一台是1080p分辨率，一台是2k分辨率，并且两台电脑屏幕比例和面积一样，像素的大小就是屏幕面积除以像素个数，故而很明显两台电脑的像素大小是不一样的，并且分辨率低的像素大小要大于分辨率高的像素大小。故而，同样是16px的字体，分辨率低的那个电脑显示出来的字体就要比分辨率高的字体大。

故而以下的字体为什么是相对单位以及为什么是绝对单位就明了了。

em

相对单位，相对于当前字体大小进行计算。

如果设置font-size：em相对于父元素字体大小计算。

关于em，可以用来调整浏览器默认字体大小基准：

浏览器默认16px，计算出10px = 0.625em，那么就将body的font-size声明为0.625em

body {
    font-size: 62.5%;
}

此时文档中的字体大小1em就是10px，以后我们要使用各种不同大小的字体只要：

a {
    /*12px*/
    font-size: 1.2em;
}

注意，如果嵌套的话：

<p class="p1">
    <p class="p2"></p>
</p>

body {
    font-size: 62.5%;
}
.p1 {
    font-size: 1.2em;
}
.p2 {
    font-szie: 1.2em;
}

这样就使得.p1变为12px，而.p2相对于.p1的1.2倍就是1.44em，也就是14.4px。

这里要.p2也使用12px就要这样写:font-size: 1em来继承.p1的大小。

ex

相对单位，相对于当前字体的小写x高度进行计算，x的高度通常是字体高度的一半（1ex = 0.5em）。

rem

相对单位，相对于root节点html元素的字体大小（16px）进行计算。

这个单位统一使用html元素大小为基准，避免了多层嵌套使用em后的大小叠加，可以用于需要多设备适配的项目。

先将html元素设置为10px作为基准：

html {
    font-size: 62.5%;
}

vw

相对单位，相对于viewpoint width进行计算，1vw=视窗宽度的1%。

vh

相对单位，相对于viewpoint height进行计算，1vh=视窗高度的1%。

vmin

相对单位，取vw和vh中较小的那个值。

vmax

相对单位，取vw和vh中较大的那个值。

百分比%

相对单位，取相对于父元素的百分比。

in

绝对单位

cm

绝对单位

mm

绝对单位

pt

绝对单位，1 pt = 1/72 in

pc

绝对单位，1 pc = 1/6 inch = 12 pt

ch

相对单位，以当前字体中的数字0为基准计算。