The calc() function computes a calculation to be utilized as the property’s value.
| calc(expression) |
|
Value |
Description |
|
expression |
Required: A mathematical expression whose result will be used as the value. The following operators can be used: +, -, *, /. |
Consider the following example:
Example
Use `calc()` to determine the width of a `<div>` element:
|
#div1 { |
The max() function selects the highest value among a list of comma-separated values to serve as the property value.
| max(value1, value2, …) |
|
Value |
Description |
|
value1, value2, … |
Required: A list of comma-separated values, from which the largest value is selected. |
Example
Utilize the max() function to establish the width of #div1 as the maximum value between 50% and 300px.
| #div1 { background-color: yellow; height: 100px; width: max(50%, 300px); } |
The min() function selects the smallest value among a list of comma-separated values to serve as the property value.
| min(value1, value2, …) |
|
Value |
Description |
|
value1, value2, … |
Required: A list of comma-separated values, from which the smallest value is selected. |
Consider the following example:
Example
Utilize the min() function to establish the width of #div1 as the minimum value between 50% and 300px.
| #div1 { background-color: yellow; height: 100px; width: min(50%, 300px); } |
|
Function |
Description |
|
calc() |
Enables you to perform calculations to determine CSS property values. |
|
max() |
Uses the largest value from a comma-separated list as the property value. |
|
min() |
Uses the smallest value from a comma-separated list as the property value. |
