CSS Academy · Oppitunti

calc() dynaamisiin laskutoimituksiin

Yhdistäkää yksiköitä ja tehkää aritmeettisia laskutoimituksia CSS:ssä calc()-funktiolla dynaamisten arvojen luomiseksi.

Oppitunti 1/413 vaihetta

calc() dynaamisiin laskutoimituksiin on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mikä on calc()?

calc()-funktion avulla voit tehdä laskutoimituksia suoraan CSS-ominaisuuksien arvoissa. Voit yhdistää eri yksiköitä (px, %, rem, vw) samaan laskutoimitukseen.

calc()-syntaksin perusteet

Funktio tukee yhteenlaskua (+), vähennyslaskua (-), kertolaskua (*) ja jakolaskua (/). Operaattorien + ja - ympärillä on oltava välilyönnit.

  <div class="sidebar">Sidebar (100% - 240px)</div>

Yksiköiden yhdistäminen

calc()-funktion supervoima on sellaisten yhteensopimattomien yksiköiden yhdistäminen, joita ei muuten voisi yhdistää:

  <div class="hero">Hero</div>
  <div class="column">Column</div>

calc() ja CSS-muuttujat

Yhdistä calc() CSS:n mukautettuihin ominaisuuksiin dynaamisia design-tokeneita varten:

  <div class="main">Main content</div>

Sisäkkäiset calc()-funktiot

calc()-funktioita voi käyttää sisäkkäin, vaikka sitä tarvitaan harvoin, koska jokainen konteksti laskee matemaattisen lausekkeen jo valmiiksi:

  <div class="element">Element</div>

calc() joustavaan typografiaan

Käytä calc()-funktiota lineaarisen interpoloinnin luomiseen kahden koon välille:

  <h1>Fluid Heading</h1>

Jakolasku calc()-funktiossa

Jakolaskussa jakajan on oltava yksikötön luku:

  <div class="thirds">Third width</div>

calc() Gridissä ja Flexboxissa

Hyödyllinen ruudukon ratojen määrityksissä ja flex-basis-arvossa:

  <div class="grid"><div>A</div><div>B</div></div>

calc() ja muut funktiot

Milloin mitäkin kannattaa käyttää:

calc(): mielivaltaiset laskutoimitukset, erityisesti yksiköiden yhdistäminen
min()/max(): valitse vaihtoehdoista pienempi tai suurempi
clamp(): rajaa joustava arvo minimi- ja maksimiarvon väliin

Selaintuki

calc() toimii kaikissa nykyaikaisissa selaimissa ja IE11:ssä. Se on yksi parhaiten tuetuista CSS-funktioista. Sitä voi käyttää ilman varavaihtoehtoja kaikissa nykyaikaisissa projekteissa.

Yleisiä calc()-malleja

Käytännöllisiä malleja, joita tulette käyttämään toistuvasti:

  <div class="full-height">Full height minus header</div>
  <div class="half-minus-gap">Half minus gap</div>
  <div class="row"><div class="thirds-with-gaps">Third</div></div>

Pikatarkistus

Mikä calc()-lauseke tuottaa oikean tuloksen laskulle ”30 % ylätason elementistä vähennettynä 20px”?

Vastaa interaktiivisessa oppitunnissa

Kertaus

calc() mahdollistaa eri yksiköitä yhdistävät laskutoimitukset CSS:ssä. Sen avulla voidaan toteuttaa dynaamisia asetteluja, kuten ”koko näkymäalue vähennettynä kiinteän yläpalkin korkeudella”, sekä joustavaa typografiaa interpoloimalla. Operaattorien + ja - ympärillä on oltava välilyönnit. Yhdistä se CSS-muuttujiin tehokkaita design-tokenien laskutoimituksia varten. Käytä sitä yhdessä funktioiden min, max ja clamp kanssa, niin saat kattavan hallinnan joustavista ko'oista.

Aloita maksutta

Opi CSS tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”calc() dynaamisiin laskutoimituksiin” ilmainen?

Kyllä – oppitunnin ”calc() dynaamisiin laskutoimituksiin” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”calc() dynaamisiin laskutoimituksiin”?

Yhdistäkää yksiköitä ja tehkää aritmeettisia laskutoimituksia CSS:ssä calc()-funktiolla dynaamisten arvojen luomiseksi. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”calc() dynaamisiin laskutoimituksiin”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?

Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

calc() dynaamisiin laskutoimituksiin
min(), max() ja clamp() joustaviin arvoihin
repeat() ja minmax() Gridissä
color-mix() ja suhteellinen värisyntaksi

← Takaisin: CSS Academy