➢The CSS math functions allow mathematical expressions to be used as property values. Here, we will explain the calc(), max() and min() functions.
➢The calc() function performs a calculation to be used as the property value.
EXAMPLE:
#id1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
➢The max() function uses the largest value, from a comma-separated list of values, as the property value.
EXAMPLE:
#id1 {
background-color: yellow;
height: 50px;
width: max(50%, 300px);
}
➢The min() function uses the smallest value, from a comma-separated list of values, as the property value.
EXAMPLE:
#id1 {
background-color: yellow;
height: 50px;
width: min(50%, 300px);
}
Function |
Description |
calc() |
Allows you to perform calculations to determine CSS property values |
max() |
Uses the largest value, from a comma-separated list of values, as the property value |
min() |
Uses the smallest value, from a comma-separated list of values, as the property value
|