Funkcje matematyczne CSS
Funkcje matematyczne CSS umożliwiają używanie wyrażeń matematycznych jako wartości właściwości. Tutaj wyjaśnimy calc()funkcje
max()i min().
Funkcja calc()
Funkcja calc()wykonuje obliczenia, które mają być użyte jako wartość właściwości.
Składnia CSS
calc(expression)
| Value | Description |
|---|---|
| expression | Required. A mathematical expression. The result will be used as the value. The following operators can be used: + - * / |
Spójrzmy na przykład:
Przykład
Użyj funkcji calc(), aby obliczyć szerokość elementu <div>:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
Funkcja max ()
Funkcja max()używa największej wartości z listy wartości oddzielonych przecinkami jako wartości właściwości.
Składnia CSS
max(value1, value2, ...)
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the largest value is chosen |
Spójrzmy na przykład:
Przykład
Użyj max(), aby ustawić szerokość #div1 na największą wartość, 50% lub 300px:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
Funkcja min()
Funkcja min()używa najmniejszej wartości z listy wartości oddzielonych przecinkami jako wartości właściwości.
Składnia CSS
min(value1, value2, ...)
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the smallest value is chosen |
Spójrzmy na przykład:
Przykład
Użyj min(), aby ustawić szerokość #div1 na najmniejszą wartość, 50% lub 300px:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
Wszystkie funkcje matematyczne CSS
| 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 |