DevShelf

Appearance

calc() ​

描述 ​

calc() CSS 函数用于指示使用大小、角度、时间或数字作为值的属性的计算值。这允许您根据不同测量单位的加（+）、减（-）、乘（*）和除（/）来设置值，例如，您可以设置 100% - 20px。如果无法计算该值，则忽略该值。

语法 ​

css
<calc()> = calc( <calc-sum> )
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ] *
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <calc-number-value> ] *
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
<calc-number-sum> = <calc-number-product> [ [ '+' | '-' ] <calc-number-product> ] *
<calc-number-product> = <calc-number-value> [ '*' <calc-number-value> | '/' <calc-number-value> ] *
<calc-number-value> = <number> | ( <calc-number-sum> )

值 ​

  • + addition (width: calc (20px + 20px));
  • - subtraction (padding: calc (10% - 10px)😉;
  • * multiplication (height: calc (20% * 2)😉
  • / division. It is forbidden to divide by zero (width: calc (100% / 3)😉

效果展示 ​