CSS 单位

• 

  CSS单位

  CSS有几个不同的单位来表示长度。许多CSS属性采用“长度”值，例如宽度，边距，填充，字体大小，边框宽度等。长度是一个数字，后跟长度单位，例如10px，2em等。数字和单位之间不能出现空格。但是，如果该值为0，则可以省略该单位。对于某些CSS属性，允许使用负长度。有两种类型的长度单位：绝对和相对。

• 

  绝对长度

  绝对长度单位是固定的，以这些中的任何一个表示的长度将显示为该大小。建议不要在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。但是，如果输出介质已知，则可以使用它们，例如用于打印布局。

  单位	描述
  cm	厘米
  mm	毫米
  in	英寸(1in = 96px = 2.54cm)
  px	* 像素 (1px = 1/96th of 1in)
  pt	积分 (1pt = 1/72 of 1in)
  pc	picas (1pc = 12 pt)

  *像素（px）相对于观看设备。对于低分辨率设备，1px是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px意味着多个设备像素。

• 

  相对长度

  相对长度单位指定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间更好地缩放。

  单位	描述
  em	相对于元素的字体大小(2em表示2倍于当前字体大小)
  ex	相对于当前字体的x高度(很少使用)
  ch	相对于“0”的宽度(0)
  rem	相对于根元素的字体大小
  vw	相对于视窗宽度的1% *
  vh	相对于视口高度的1% *
  vmin	相对于1%的viewport的*较小的尺寸
  vmax	相对于1%的视口的*更大的尺寸
  %	相对于父元素

  提示： em和rem单元在创建完美可扩展的布局方面非常实用！
  * Viewport=浏览器窗口大小。如果视口宽50厘米，1vw=0.5厘米。

• 

  浏览器支持

  单位	Edge/IE	Chrome	FireFox	Safari	Opera
  单位表示
  em, ex, %, px, cm, mm, in, pt, pc	3.0（含）以上	1.0（含）以上	1.0（含）以上	1.0（含）以上	3.5（含）以上
  ch	9.0（含）以上	27.0（含）以上	1.0（含）以上	7.0（含）以上	20.0（含）以上
  rem	9.0（含）以上	4.0（含）以上	3.6（含）以上	4.1（含）以上	11.6（含）以上
  vh, vw	9.0（含）以上	20.0（含）以上	19.0（含）以上	6.0（含）以上	20.0（含）以上
  vmin	9.0（含）以上	20.0（含）以上	19.0（含）以上	6.0（含）以上	20.0（含）以上
  vmin	不支持	26.0（含）以上	19.0（含）以上	7.0（含）以上	20.0（含）以上

  注意： Internet Explorer 9支持使用非标准名称的vmin：vm。

• 

  相关页面

  HTML教程：HTML样式