Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Työskentely Lohkotason Elementtien Kanssa | CSS-laatikkomalli ja Elementtien Välistys
CSS:n Perusteet

bookTyöskentely Lohkotason Elementtien Kanssa

Lohkotason elementit ovat suorakulmaisia ja asettuvat päällekkäin, estäen muita elementtejä jakamasta samaa riviä. Tätä käyttäytymistä ohjaa CSS-ominaisuus display: block.

Tärkeimmät seikat lohkotason elementeistä:

  • Oletusarvona display: block;
  • Leveys ulottuu koko vanhemman säiliön leveydelle;
  • Korkeus määräytyy sisällön mukaan, mutta sitä voidaan muokata CSS:llä;
  • Alkaa aina uudelta riviltä;
  • Ominaisuuksia kuten border, margin, padding, width ja height voidaan säätää.

Tarkastellaan esimerkkiä, jossa muokataan width, height ja margin:

index.html

index.html

index.css

index.css

copy

Tarkastellaan, kuinka voimme keskittää elementin sen vanhemman sisälle.

index.html

index.html

index.css

index.css

copy
Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 8

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

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

Awesome!

Completion rate improved to 2.56

bookTyöskentely Lohkotason Elementtien Kanssa

Pyyhkäise näyttääksesi valikon

Lohkotason elementit ovat suorakulmaisia ja asettuvat päällekkäin, estäen muita elementtejä jakamasta samaa riviä. Tätä käyttäytymistä ohjaa CSS-ominaisuus display: block.

Tärkeimmät seikat lohkotason elementeistä:

  • Oletusarvona display: block;
  • Leveys ulottuu koko vanhemman säiliön leveydelle;
  • Korkeus määräytyy sisällön mukaan, mutta sitä voidaan muokata CSS:llä;
  • Alkaa aina uudelta riviltä;
  • Ominaisuuksia kuten border, margin, padding, width ja height voidaan säätää.

Tarkastellaan esimerkkiä, jossa muokataan width, height ja margin:

index.html

index.html

index.css

index.css

copy

Tarkastellaan, kuinka voimme keskittää elementin sen vanhemman sisälle.

index.html

index.html

index.css

index.css

copy
Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 8
some-alt