CSS代码中有哪些长度单位可用呢?


摘要:
下文讲述css代码中长度单位的简介说明,如下所示:

在css的很多属性值中都会使用长度单位,如:
width,height,margin,padding border,top,left等都会使用到长度单位,那么css中到底有哪些长度单位可用,如下所示:

绝对长度单位


px–像素

.a {
  width:200px; 
}

css中的px像素不是设备像素,它是一个使用角度度量的单位。


in–英寸

 
.a {
  width:4in; 
}

in英寸是一个物理度量单位,
在CSS领域,英寸只不过被直接映射成像素罢了

1in == 96px


cm–厘米

 
.a {
  width:2cm; 
}

在css代码中,厘米也被映射为像素

1cm == 37.8px


mm–毫米

 
.a {
  width:2mm; 
}

在css代码中,毫米也被映射为像素

1mm == 0.1cm == 3.78px


pt–点

 
.a {
  font-size: 10pt;
}

pt(point)点,
排版中字体常用的单位,它是一种固定长度的度量单位

1pt=1/72in=1.33px


pc–派卡

 
.a {
  font-size: 2pc;
}

pc(pica)派卡是印刷行业使用的长度单位

1pc=12pt=16px


相对字体的长度


em

 
.a {
  font-size: 10em;
}

Em 是一个相对单位,

在无CSS定义下,1em的长度是:

1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm
1em相对于font-size大小


rem

 
.a {
  font-size: 10rem;
}

rem和em都是相对单位


rem

 
.a {
  font-size: 10rem;
}


ex

 
.a {
  font-size: 60ex;
}

ex是一个基于当前字体的x字母高度度量的。
ex度量时有时候根据字体自身的信息,有时候由浏览器指明是通过一个小写字形来度量,最糟糕的情况是,它被设置成0.5em。


ch

 
.a {
  font-size: 60ch;
}

ch和x高度相似,
只是ch是基于字符0的宽度的而不是基于字符x高度的。当font-family改变的时候ch也会随着改变。


vw

 
.a {
  font-size: 60vw;
}

vw 可视区百分比长度单位

vw 可视区域宽度单位,
1vw为可视区域宽度的百分之一


vh

 
.a {
  font-size: 60vh;
}

vh可视区百分比长度单位

vh 可视区域高度单位,
1vw为可视区域高度度的百分之一


vmin

vmin为vh和vw中最小的一个值


vmax

vmax为vh和vw中最大的一个值