## CSS中有哪些单位 **考察点** 1. CSS中有哪些单位 2. 各个单位的作用和区别，特别是在响应式布局中的作用 **回答** 1. 像素`px`, 百分比`%`, 当前字体大小`em`, 相对根节点html的字体大小`rem`, 磅`pt`, 毫米`mm`, 厘米`cm`, 英寸`in`, 12 点活字`pc` , CSS3中新增单位`vw`,`vh`, `vmin`, `vmax`。 | 属性/单位 |% |em |rem |vw/vh |vmax/vmin |px/pt /cm/mm /in/pc| | --- | --- | --- | --- | --- | --- | --- | |width |父容器宽度的百分比 | 当前元素font-size的倍数 | 相对于根元素(即html元素)font-size计算值的倍数 | 相对于视窗的宽度/高度：视窗宽度是100vw , 高度是100vh | vmin是vw和vh中较小的那个, vmax是vw和vh中较大的那个 | 具体值：px=像素， pt=1/72英寸， cm=厘米，mm=毫米， in=英寸, pc=1/6英寸| |height |父容器高度的百分比 | 当前元素font-size的倍数 |相对于根元素(即html元素)font-size计算值的倍数 | 相对于视窗的宽度/高度：视窗宽度是100vw , 高度是100vh | vmin是vw和vh中较小的那个, vmax是vw和vh中较大的那个 |具体值 | |padding |父容器宽度的百分比 | 当前元素font-size的倍数 | 相对于根元素(即html元素)font-size计算值的倍数 | 相对于视窗的宽度/高度：视窗宽度是100vw , 高度是100vh | vmin是vw和vh中较小的那个, vmax是vw和vh中较大的那个 |具体值 | |margin |父容器宽度的百分比 | 当前元素font-size的倍数 |相对于根元素(即html元素)font-size计算值的倍数 | 相对于视窗的宽度/高度：视窗宽度是100vw , 高度是100vh | vmin是vw和vh中较小的那个, vmax是vw和vh中较大的那个 |具体值 | |font-size | 父容器字体大小的百分比 |父容器font-size的倍数 | 相对于根元素(即html元素)font-size计算值的倍数 | 相对于视窗的宽度/高度：视窗宽度是100vw , 高度是100vh | vmin是vw和vh中较小的那个, vmax是vw和vh中较大的那个 | 具体值 | |left/right/top/bottom |父容器宽度/高度的百分比 | 当前元素font-size的倍数 |相对于根元素(即html元素)font-size计算值的倍数 | 相对于视窗的宽度/高度：视窗宽度是100vw , 高度是100vh | vmin是vw和vh中较小的那个, vmax是vw和vh中较大的那个 |具体值 | |border-width | N/A | 当前元素font-size的倍数 | 相对于根元素(即html元素)font-size计算值的倍数 | 相对于视窗的宽度/高度：视窗宽度是100vw , 高度是100vh | vmin是vw和vh中较小的那个, vmax是vw和vh中较大的那个 |具体值 | |border-radius |当前元素宽度/高度的百分比 | 当前元素font-size的倍数 | 相对于根元素(即html元素)font-size计算值的倍数 | 相对于视窗的宽度/高度：视窗宽度是100vw , 高度是100vh | vmin是vw和vh中较小的那个, vmax是vw和vh中较大的那个 |具体值 | |box-shadow |N/A |当前元素font-size的倍数 |相对于根元素(即html元素)font-size计算值的倍数 | 相对于视窗的宽度/高度：视窗宽度是100vw , 高度是100vh | vmin是vw和vh中较小的那个, vmax是vw和vh中较大的那个 | 具体值| |transform | 当前元素宽度/高度的百分比 |当前元素font-size的倍数 |相对于根元素(即html元素)font-size计算值的倍数 | 相对于视窗的宽度/高度：视窗宽度是100vw , 高度是100vh | vmin是vw和vh中较小的那个, vmax是vw和vh中较大的那个 |具体值 | |background-size |当前元素的宽度/高度的百分比 |当前元素font-size的倍数 | 相对于根元素(即html元素)font-size计算值的倍数 | 相对于视窗的宽度/高度：视窗宽度是100vw , 高度是100vh | vmin是vw和vh中较小的那个, vmax是vw和vh中较大的那个 | 具体值 | |background-position |当前元素的宽度/高度的百分比 | 当前元素font-size的倍数 | 相对于根元素(即html元素)font-size计算值的倍数 | 相对于视窗的宽度/高度：视窗宽度是100vw , 高度是100vh | vmin是vw和vh中较小的那个, vmax是vw和vh中较大的那个 |具体值 |