CSS matemaattiset funktiot

CSS matemaattiset funktiot sallivat matemaattisten lausekkeiden käyttämisen ominaisuuksien arvoina. Tämä luku käsittelee calc(),max() Ja min() Funktio.

calc() funktio

calc() Funktio suorittaa laskun ja käyttää tulosta ominaisuuden arvona.

CSS syntaksi

calc(expression)
Arvo Kuvaus
expression Välttämätön. Matemaattinen lauseke. Tulos käytetään arvona. Voit käyttää seuraavia operaattoreita: +, -, *, /

Katsotaan esimerkkiä:

Esimerkki

Käytä calc() Laske <div> elementin leveys:

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

Kokeile itse

max() funktio

max() Funktion käyttämä pilkkuja erottama arvot lista suurin arvo ominaisuuden arvona.

CSS syntaksi

max(value1, value2, ...)
Arvo Kuvaus
value1, value2, ... Välttämätön. Pilkkujen erottamat arvot - valitse suurin arvo.

Katsotaan esimerkkiä:

Esimerkki

Käytä max() Aseta div1:n leveys suuremmaksi 50%:sta tai 300px:sta:

#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}

Kokeile itse

min()-funktio

min() Funktiota käytetään komavaihdolla erotetun arvojen listan pienimmän arvon valitsemiseen ominaisuudeksi.

CSS syntaksi

min(value1, value2, ...)
Arvo Kuvaus
value1, value2, ... Välttämätön. Komavaihdolla erotettu arvojen lista - valitaan pienin arvo

Katsotaan esimerkkiä:

Esimerkki

Käytä min() Aseta #div1:n leveys 50% tai 300px:n pienimmäksi arvoksi:

#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}

Kokeile itse

CSS-funktioiden käyttöohje

Jos haluat saada täydellisen listan kaikista CSS-funktioista, vierailkaamme CSS-funktioiden käyttöohje.