Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele CSS:n Laatikkokoon Ymmärtäminen | CSS-laatikkomalli ja Elementtien Välistys
CSS:n Perusteet

bookCSS:n Laatikkokoon Ymmärtäminen

box-sizing-ominaisuudella määritetään, miten elementin kokonaiskoko lasketaan erityisesti sen width- ja height-arvojen osalta. box-sizing-ominaisuudella on kolme mahdollista arvoa. Tarkastellaan, mitä kukin näistä arvoista tarkoittaa:

box-sizing: content-box | border-box | inherit;
index.html

index.html

styles.css

styles.css

copy

Tuloste

inherit

  • inherit-arvo mahdollistaa elementin box-sizing-ominaisuuden perimisen sen vanhemman elementiltä;
  • Tämä tarkoittaa, että nykyisen elementin box-sizing-käyttäytyminen määräytyy vanhemman elementin box-sizing-ominaisuuden mukaan;
  • Tämä voi auttaa varmistamaan yhtenäisen box-sizing-käyttäytymisen koko dokumentissa asettamalla se vanhemmalle säiliölle.

1. Mikä on box-sizing-ominaisuuden oletusarvo?

2. Jos vanhemmalla elementillä on box-sizing: border-box ja lapsielementillä on box-sizing: inherit, mitä arvoa lapsielementti käyttää box-sizing-ominaisuudessa?

question mark

Mikä on box-sizing-ominaisuuden oletusarvo?

Select the correct answer

question mark

Jos vanhemmalla elementillä on box-sizing: border-box ja lapsielementillä on box-sizing: inherit, mitä arvoa lapsielementti käyttää box-sizing-ominaisuudessa?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 2

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

Can you explain when I should use content-box vs border-box in my projects?

What are some common issues caused by not using border-box?

Can you show a visual example comparing content-box and border-box?

Awesome!

Completion rate improved to 2.56

bookCSS:n Laatikkokoon Ymmärtäminen

Pyyhkäise näyttääksesi valikon

box-sizing-ominaisuudella määritetään, miten elementin kokonaiskoko lasketaan erityisesti sen width- ja height-arvojen osalta. box-sizing-ominaisuudella on kolme mahdollista arvoa. Tarkastellaan, mitä kukin näistä arvoista tarkoittaa:

box-sizing: content-box | border-box | inherit;
index.html

index.html

styles.css

styles.css

copy

Tuloste

inherit

  • inherit-arvo mahdollistaa elementin box-sizing-ominaisuuden perimisen sen vanhemman elementiltä;
  • Tämä tarkoittaa, että nykyisen elementin box-sizing-käyttäytyminen määräytyy vanhemman elementin box-sizing-ominaisuuden mukaan;
  • Tämä voi auttaa varmistamaan yhtenäisen box-sizing-käyttäytymisen koko dokumentissa asettamalla se vanhemmalle säiliölle.

1. Mikä on box-sizing-ominaisuuden oletusarvo?

2. Jos vanhemmalla elementillä on box-sizing: border-box ja lapsielementillä on box-sizing: inherit, mitä arvoa lapsielementti käyttää box-sizing-ominaisuudessa?

question mark

Mikä on box-sizing-ominaisuuden oletusarvo?

Select the correct answer

question mark

Jos vanhemmalla elementillä on box-sizing: border-box ja lapsielementillä on box-sizing: inherit, mitä arvoa lapsielementti käyttää box-sizing-ominaisuudessa?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 2
some-alt