CSS ਮੈਥਮੈਟਿਕ ਫੰਕਸ਼ਨ

CSS 数学函数允许将数学表达式用作属性值。本章将讲解 calc()、max() 和 min() 函数。

calc() 函数

calc() 函数执行计算，并将结果用作属性值。

CSS ਗਰੰਟੇ

calc(expression)
值 描述
expression 必需。数学表达式。结果将用作值。可以使用以下运算符：+、-、*、/

让我们看一个例子：

实例

使用 calc() calc() ਵਰਗੇ <div> ਐਲੀਮੈਂਟ ਦੀ ਚੌਦਾਈ ਨੂੰ ਜਾਂਚ ਕਰੋ:

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

亲自试一试

max() ਫੰਕਸ਼ਨ

max() ਫੰਕਸ਼ਨ ਕਮਾ ਨਾਲ ਵੱਖਰੇ ਮੁੱਲਾਂ ਦੀ ਸੂਚੀ ਵਿੱਚੋਂ ਵੱਡਾ ਮੁੱਲ ਨੂੰ ਪ੍ਰਤੀਭੂਤੀ ਵਜੋਂ ਵਰਤੇ ਜਾਂਦਾ ਹੈ。

CSS ਗਰੰਟੇ

max(value1, value2, ...)
值 描述
value1, value2, ... ਲਾਜ਼ਮੀ। ਕਮਾ ਨਾਲ ਵੱਖਰੇ ਮੁੱਲਾਂ ਦੀ ਸੂਚੀ - ਵੱਡਾ ਮੁੱਲ ਚੁਣੋ。

让我们看一个例子：

实例

使用 max() ਜੀਐੱਸ #div1 ਦੀ ਚੌਦਾਈ ਨੂੰ 50% ਜਾਂ 300px ਵਿੱਚੋਂ ਵੱਡਾ ਮੁੱਲ ਸੈਟ ਕਰੋ:

#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}

亲自试一试

min() 函数

min() 函数使用逗号分隔的值列表中的最小值作为属性值。

CSS ਗਰੰਟੇ

min(value1, value2, ...)
值 描述
value1, value2, ... 必需。一个逗号分隔的值列表——选择最小的值

让我们看一个例子：

实例

使用 min() 将 #div1 的宽度设置为 50% 或 300px 中的较小值：

#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}

亲自试一试

CSS 函数参考

如需所有 CSS 函数的完整列表，请访问我们的 CSS فونکشن مراجع。