取值与单位 | 青训营笔记

150 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第十六天

1. 长度取值 Length Data Types

长度取值版本描述
<length>CSS2<number>接长度单位。

长度单位 Length Units

文本相对长度单位 Font-relative Length Units

长度单位版本描述
emCSS1相对于当前对象内文本的字体尺寸
exCSS1相对于字符“x”的高度。通常为字体高度的一半
chCSS3数字“0”的宽度
remCSS3相对于根元素(即html元素) font-size 计算值的倍数

视口相对长度单位 Viewport-relative Length Units

长度单位版本描述
vwCSS3相对于视口的宽度。视口被均分为100单位的vw
vhCSS3相对于视口的高度。视口被均分为100单位的vh
vmaxCSS3相对于视口的宽度或高度,总是相对于大的那个。视口的宽度或高度被均分为100单位的vmax
vminCSS3相对于视口的宽度或高度,总是相对于小的那个。视口的宽度或高度被均分为100单位的vmin

绝对长度单位 Absolute Length Units

长度单位版本描述
cmCSS1厘米
mmCSS1毫米
qCSS31/4毫米(quarter-millimeters); 1q = 0.25mm
inCSS1英寸(inches); 1in = 2.54cm
ptCSS1点(points); 1pt = 1/72in
pcCSS1派卡(picas); 1pc = 12pt = 1/6in
pxCSS1像素(pixels); 1px = 1/96in

2. 角度取值 Angle Data Types

角度取值版本描述
<angle>CSS3<number>接角度单位。

角度单位 Angle Units

角度单位版本描述
degCSS3度(Degrees)
gradCSS3梯度(Gradians)
radCSS3弧度(Radians)
turnCSS3转、圈(Turns)

特殊布局取值 Layout-specific Data Types

特殊布局取值版本描述
<fraction>CSS3<number>接剩余空间数单位。
<grid>CSS3<number>接网格数单位。

特殊布局单位 Layout-specific Units

特殊布局单位版本描述
frCSS3剩余空间分配数
grCSS3网格数

颜色值 Color Data Types

名称版本描述
<color>CSS1/CSS3用来表示颜色的关键字或者数值规则
Color NameCSS1用颜色名称来指定颜色。包括基本颜色关键字、系统颜色、SVG颜色关键字等
HEXCSS1十六进制记法。语法如:#rrggbb或#rgb
RGBCSS2rgb记法
RGBACSS3rgba记法
HSLCSS3hsl记法
HSLACSS3hsla记法
transparentCSS1/CSS3全透明
currentColorCSS3当前颜色