【W3学习】CSS Values and Units Module Level 4（CSS 值和单位模块）

这个 CSS 模块描述了 CSS 属性接受的通用值和单位，以及用于在 CSS 属性定义中描述它们的语法。

字体大小相关的单位Font-relative Lengths:

em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh

视域长宽高相关的单位Viewport-percentage Lengths: 

*vw, *vh, *vi, *vb, *vmin, *vmax

 

 

 

绝对长宽高相关的单位Absolute Lengths:

cm, mm, Q, in, pt, pc, px

 

角度单位Angle Units: the <angle> type and deg, grad, rad, turn

时间单位Duration Units: the <time> type and s, ms

频率单位Frequency Units: the <frequency> type and Hz, kHz

解析度单位Resolution Units: the <resolution> type and dpi, dpcm, dppx

 

 

数学表达式

The math functions (calc(), clamp(), sin(), and others defined in this chapter) allow numeric CSS values to be written as mathematical expressions.

基本表达Basic Arithmetic:

calc()

比较Comparison Functions:

min(), max(), and clamp()

阶梯值Stepped Value Functions:

round(), mod(), and rem()

三角函数Trigonometric Functions:

sin(), cos(), tan(), asin(), acos(), atan(), and atan2()

指数Exponential Functions:

pow(), sqrt(), hypot(), log(), exp()

标志相关Sign-Related Functions:

abs(), sign()

数Numeric Constants:

e, pi

<calc()>  = calc( <calc-sum> )
<min()>   = min( <calc-sum># )
<max()>   = max( <calc-sum># )
<clamp()> = clamp( <calc-sum>#{3} )
<round()> = round( <rounding-strategy>?, <calc-sum>, <calc-sum> )
<mod()>   = mod( <calc-sum>, <calc-sum> )
<rem()>   = rem( <calc-sum>, <calc-sum> )
<sin()>   = sin( <calc-sum> )
<cos()>   = cos( <calc-sum> )
<tan()>   = tan( <calc-sum> )
<asin()>  = asin( <calc-sum> )
<acos()>  = acos( <calc-sum> )
<atan()>  = atan( <calc-sum> )
<atan2()> = atan2( <calc-sum>, <calc-sum> )
<pow()>   = pow( <calc-sum>, <calc-sum> )
<sqrt()>  = sqrt( <calc-sum> )
<hypot()> = hypot( <calc-sum># )
<log()>   = log( <calc-sum>, <calc-sum>? )
<exp()>   = exp( <calc-sum> )
<abs()>   = abs( <calc-sum> )
<sign()>  = sign( <calc-sum> )
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> = <calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> = <number> | <dimension> | <percentage> |
               <calc-constant> | ( <calc-sum> )
<calc-constant> = e | pi | infinity | -infinity | NaN
<rounding-strategy> = nearest | up | down | to-zero