CSS-kehyselementti

CSS-kehyselementti

Kaikki HTML-elementit voidaan nähdä laatikkoina. CSS:ssä, kun puhutaan suunnittelusta ja asettelusta, käytetään termiä “ laatikkomalli” tai “ ruutumalli”.

CSS-kehysohjelma on itse asiassa kehys, joka ympäröi jokaisen HTML-elementin. Se sisältää: ulkoruudut, reunaviivat, sisätilat ja todellinen sisältö. Alla olevassa kuvassa näkyy kehysohjelma:

CSS-kehyselementti

Eri osien selitykset:

  • Sisältö - Kehyksen sisältö, jossa näkyy teksti ja kuvat.
  • Sisätilat - Poista sisällön ympäriltä oleva alue. Sisätilat ovat läpinäkyviä.
  • Reunaviivat - Ympäröi sisätilat ja sisällön reunaviivat.
  • Ulkoruudut - Poista rajan ulkopuolinen alue. Ulkoruudut ovat läpinäkyviä.

Kehysohjelma mahdollistaa reunaviivojen lisäämisen elementin ympärille ja määrittää elementtien välisen tilan.

Elementin kehyksen sisimmässä osassa on todellinen sisältö, joka on suoraan sisällä sisätiloja. Sisätilojen reuna on reunaviiva. Reunaviivan ulkopuolella on ulkoruudut, ja ulkoruudut ovat oletuksena läpinäkyviä, joten ne eivät varjoa niiden taustalla olevia elementtejä.

Vinkki:Tausta sovelletaan alueeseen, joka koostuu sisällöstä, sisätiloista ja reunaviivoista.

Sisätilat, reunaviivat ja ulkoruudut ovat valinnaisia, oletusarvo on nolla. Monet elementit kuitenkin asettavat käyttäjäagentin tyyliohjelman ulkoruudut ja sisätilat. Voit korvata nämä selaimen tyylit asettamalla elementin margin ja padding nollaksi. Tämä voidaan tehdä erikseen tai käyttää yleistä valitsinta kaikkien elementtien asettamiseksi:

* {
  margin: 0;
  padding: 0;
}

CSS:ssä width ja height tarkoittavat sisällön alueen leveyttä ja korkeutta. Lisää sisätilat, reunaviivat ja ulkoruudut eivät vaikuta sisällön alueen kooon, mutta lisäävät elementin kokokoon.

Oletetaan, että kehyksen jokaisella reunalla on 10 pikselin ulkoruutu ja 5 pikselin sisätila. Jos haluat, että tämä elementtikehykseni saavuttaa 100 pikselin, sinun on asetettava sisällön leveys 70 pikseliin. Katso alla oleva kuva:

CSS-kehyselementin esimerkki 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

Vinkki:Sisätilat, reunaviivat ja ulkoruudut voidaan soveltaa elementin kaikkiin reunoihin tai vain yksittäisiin reunoihin.

Vinkki:Ulkoruudut voivat olla negatiivisia, ja usein niitä käytetään negatiivisten ulkoruutujen kanssa.

Esimerkki

Näytä kehysohjelma:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Kokeile itse

Elementin leveys ja korkeus

Elementin leveyden ja korkeuden oikeanmukaisen asettamisen varmistamiseksi kaikissa selaimissa on ymmärrettävä, miten kehysohjelma toimii.

Tärkeä huomio:Kun CSS:ää käytetään elementin leveyden ja korkeuden asettamiseen, riittää, että asetetaan sisällön alueen leveys ja korkeus. Elementin kokokoon laskemiseksi on lisäksi lisättävä sisätilat, reunaviivat ja ulkoreunat.

Esimerkki

<div> Elementin kokoleveys on 350px:

div {
  width: 320px;
  padding: 10px;
  border: 5px solmittu harmaa;
  margin: 0; 
}

Kokeile itse

Lasketaan seuraavasti:

320px (leveys)
+ 20px (vasen + oikea sisennyssuunta)
+ 10px (vasen + oikea reuna)
+ 0px (vasen + oikea ulkoasu)
= 350px

Elementin kokonaisleveys tulisi laskea seuraavasti:

Elementin kokonaisleveys = leveys + vasen sisennyssuunta + oikea sisennyssuunta + vasen reuna + oikea reuna + vasen ulkoasu + oikea ulkoasu

Elementin kokonaiskorkeus tulisi laskea seuraavasti:

Elementin kokonaiskorkeus = korkeus + yläsisennyssuunta + alasissenysuunta + yläreuna + alareuna + yläulkoasu + alaulkoasu