CSS Wiskunde funksies
Die CSS-wiskundige funksies laat toe dat wiskundige uitdrukkings as eienskapwaardes gebruik word. Hier sal ons die calc()
,
max()
en min()
funksies verduidelik.
Die calc() Funksie
Die calc()
funksie voer 'n berekening uit om as die eiendomswaarde gebruik te word.
CSS-sintaksis
calc(expression)
Value | Description |
---|---|
expression | Required. A mathematical expression. The result will be used as the value. The following operators can be used: + - * / |
Kom ons kyk na 'n voorbeeld:
Voorbeeld
Gebruik calc() om die breedte van 'n <div>-element te bereken:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
Die maksimum() funksie
Die max()
funksie gebruik die grootste waarde, uit 'n komma-geskeide lys van waardes, as die eiendomswaarde.
CSS-sintaksis
max(value1, value2, ...)
Value | Description |
---|---|
value1, value2, ... | Required. A list of comma-separated values - where the largest value is chosen |
Kom ons kyk na 'n voorbeeld:
Voorbeeld
Gebruik max() om die breedte van #div1 te stel na watter waarde ook al die grootste is, 50% of 300px:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
Die min() funksie
Die min()
funksie gebruik die kleinste waarde, uit 'n komma-geskeide lys van waardes, as die eiendomswaarde.
CSS-sintaksis
min(value1, value2, ...)
Value | Description |
---|---|
value1, value2, ... | Required. A list of comma-separated values - where the smallest value is chosen |
Kom ons kyk na 'n voorbeeld:
Voorbeeld
Gebruik min() om die breedte van #div1 te stel na watter waarde ook al die kleinste is, 50% of 300px:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
Alle CSS Wiskunde funksies
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 |