CSS 3 单位汇总及换算

作者:     目录: CSS+HTML & PHP+MySQL     发表: 2010年01月09日

在CSS样式表中,我们经常会看到pt、 px、em、ex、in等单位,作为网页设计师,必须了解这些单位以及换算关系。

1. 绝对单位 (Absolute measurement)

  • %:百分比
  • cm:厘米(centimeter)
  • in: 英寸(inch)(1in=2.54 cm)
  • mm:毫米(millimeter)
  • pc:pica(1pc=12 points)
  • pt:点(1pt=1/72 inch)

2. 相对单位 (Relative measurement)

  • ch:数字0的宽度(the width of the “0” glyph found in the font for the font size used to render)
  • em:元素的字体高度 (1em=current font size of current element)
  • ex:字母x的高度(x-height of the element’s font)
  • gd:网格布局中定义的网格大小(the grid defined by ‘layout-grid’)
  • px:像素(pixel of the viewing device)
  • rem:根元素字体大小(the font size of the root element)
  • vh:视窗高度(the viewports’ height)
  • vw:视窗宽度(the viewports’s width)
  • vm:取视窗长度和宽度的最小值(viewport’s height or width,whichever is smaller of the two)

3. 角度单位(Angles)

  • deg:度(degree)
  • grad:梯度(grads)
  • rad:弧度(radians)
  • turn:转(turns)

4. 时间单位(time)

  • ms:毫秒(milli-seconds)
  • s:秒(seconds)

5. 频率单位(frequency)

  • Hz:赫兹(hertz)
  • kHz:千赫兹(kilo-hertz)

6. 颜色(colors)

  • color name:red,blue,green,dark green ……
  • rgb(x,y,z):red=rgb(255,0,0)
  • rgb(x%,y%,z%):red=rgb(100%,0,0)
  • rgba(x,y,x,alpha):red=rgba(255,0,0)
  • #rrggbb:red=#ff0000 , 可简写为#f00。
  • hsl(hue,saturation,lightness):red=hsl(0,100%,50%)
  • hsla(hue,saturation,lightness,alpha):red=hsla(0,100%,50%)
  • flavor:An accent color (typically chosen by the user) to customize the user interface of the user agent itsel
  • currentColor:computed value of the ‘currentColor’ keyword is th computed value of the ‘color’ property
标签:

发表评论