在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