Matematické funkce CSS
Matematické funkce CSS umožňují použití matematických výrazů jako hodnot vlastností. Zde vysvětlíme funkce calc()
,
max()
a min()
.
Funkce calc().
Funkce calc()
provede výpočet, který má být použit jako hodnota vlastnosti.
Syntaxe CSS
calc(expression)
Value | Description |
---|---|
expression | Required. A mathematical expression. The result will be used as the value. The following operators can be used: + - * / |
Podívejme se na příklad:
Příklad
Použijte calc() k výpočtu šířky prvku <div>:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
Funkce max().
Funkce max()
používá jako hodnotu vlastnosti největší hodnotu ze seznamu hodnot oddělených čárkami.
Syntaxe CSS
max(value1, value2, ...)
Value | Description |
---|---|
value1, value2, ... | Required. A list of comma-separated values - where the largest value is chosen |
Podívejme se na příklad:
Příklad
Pomocí max() nastavte šířku #div1 podle toho, která hodnota je větší, 50 % nebo 300 pixelů:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
Funkce min().
Funkce min()
používá jako hodnotu vlastnosti nejmenší hodnotu ze seznamu hodnot oddělených čárkami.
Syntaxe CSS
min(value1, value2, ...)
Value | Description |
---|---|
value1, value2, ... | Required. A list of comma-separated values - where the smallest value is chosen |
Podívejme se na příklad:
Příklad
Pomocí min() nastavte šířku #div1 na hodnotu, která je nejmenší, 50 % nebo 300 pixelů:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
Všechny matematické funkce 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 |