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样式