CSS handleiding

CSS TUIS CSS Inleiding CSS-sintaksis CSS-keurders CSS Hoe om CSS Kommentaar CSS kleure CSS agtergronde CSS-grense CSS-marges CSS Opvulling CSS Hoogte/Breedte CSS Box Model CSS uiteensetting CSS teks CSS lettertipes CSS-ikone CSS skakels CSS-lyste CSS-tabelle CSS vertoon CSS maksimum breedte CSS posisie CSS Z-indeks CSS oorloop CSS Float CSS Inline-blok CSS Belyn CSS-kombineerders CSS Pseudo-klas CSS Pseudo-element CSS Deursigtigheid CSS-navigasiebalk CSS-aftrekkies CSS Beeldgalery CSS Beeld Sprites CSS Attr keurders CSS-vorms CSS-tellers CSS-webwerfuitleg CSS-eenhede CSS Spesifisiteit CSS !belangrik CSS Wiskunde funksies

CSS Gevorderd

CSS afgeronde hoeke CSS-randbeelde CSS agtergronde CSS kleure CSS-kleur sleutelwoorde CSS Gradiënte CSS Shadows CSS-tekseffekte CSS Web Fonts CSS 2D-transformasies CSS 3D-transformasies CSS-oorgange CSS-animasies CSS Tooltips CSS-stylbeelde CSS-beeldrefleksie CSS-objekpas CSS voorwerp-posisie CSS-maskering CSS-knoppies CSS-paginering CSS veelvuldige kolomme CSS-gebruikerskoppelvlak CSS veranderlikes CSS-boksgrootte CSS-medianavrae CSS MQ Voorbeelde CSS Flexbox

CSS reageer

RWD Inleiding RWD Uitsigpoort RWD-roosteraansig RWD Media Navrae RWD beelde RWD-video's RWD-raamwerke RWD-sjablone

CSS -rooster

Grid Intro Roosterhouer Rooster item

CSS SASS

SASS Tutoriaal

CSS voorbeelde

CSS-sjablone CSS voorbeelde css vasvra CSS Oefeninge CSS-sertifikaat

CSS Verwysings

CSS Verwysing CSS-keurders CSS-funksies CSS Verwysing Gehoor CSS Web veilige lettertipes CSS Animateerbaar CSS-eenhede CSS PX-EM-omskakelaar CSS kleure CSS-kleurwaardes CSS verstekwaardes CSS-blaaierondersteuning

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