Työ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,widthjaheightvoidaan säätää.
Tarkastellaan esimerkkiä, jossa muokataan width, height ja margin:
index.html
index.css
Tarkastellaan, kuinka voimme keskittää elementin sen vanhemman sisälle.
index.html
index.css
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Awesome!
Completion rate improved to 2.56
Työ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,widthjaheightvoidaan säätää.
Tarkastellaan esimerkkiä, jossa muokataan width, height ja margin:
index.html
index.css
Tarkastellaan, kuinka voimme keskittää elementin sen vanhemman sisälle.
index.html
index.css
Kiitos palautteestasi!