CSS-kehykemodelin yleiskatsaus

CSS-ruutumalli (Box Model) määrittelee, miten elementin ruudukko käsittelee elementin sisällön,Sisennykset、Reunat ja Reunavyöhyke tyyliä.

CSS-kehykemodelin yleiskatsaus

CSS-kehykemodeli

Elementin sisimmäinen osa on todellinen sisältö, joka on suoraan sisäpuolella sisennystä. Sisennys esittää elementin taustaa. Sisennysreunat ovat reunaa, ja reunan ulkopuolella on reunavyöhyke, joka on oletusarvoisesti läpinäkyvä, joten se ei peitä sen takana olevia elementtejä.

Vinkki:Tausta sovelletaan sisällön, sisennyksen ja reunan muodostamaan alueeseen.

Sisennykset, reunat ja reunavyöhyke ovat valinnaisia, oletusarvo on nolla. Monet elementit kuitenkin määrittävät käyttäjäagentin tyyliarvot reunavyöhykkeille ja sisennyksille. 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ää sisennykset, reunat ja reunavyöhyke eivät vaikuta sisällön alueen koossa, mutta lisää elementin kokonaiskoko.

Oletetaan, että laatikon jokaisella reunalla on 10 pixelin reunavyöhyke ja 5 pixelin sisennyse. Jos haluat, että tämä elementti laatikko saavuttaa 100 pixelin, sinun täytyy asettaa sisällön leveys 70 pixeliin, katso kuva alla:

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

Vinkki:Sisennykset, reunat ja reunavyöhyke voidaan soveltaa elementin kaikkiin reunoihin tai yksittäisiin reunoihin.

Vinkki:Reunavyöhyke voi olla negatiivinen, ja usein on käytettävä negatiivista reunavyöhykettä.

Selaimen yhteensopivuus

Kun sivulle on asetettu sopiva DTD, suurin osa selaimista näyttää sisällön yllä olevan kuvan mukaisesti. Kuitenkin IE 5 ja 6 näyttävät sen väärin. W3C:n mukaan elementin sisällön tila on määritetty width-ominaisuudella, ja sisällön ympärillä olevan sisennyksen ja reunan arvot lasketaan erikseen. Valitettavasti IE5.X ja 6 käyttävät omia epästandardimallejaan epäsymmetrisessä tilassa. Näiden selainten width-ominaisuus ei ole sisällön leveys, vaan sisällön, sisennyksen ja reunan kokonaisleveys.

Vaikka on olemassa tapoja ratkaista tämä ongelma. Parhaana ratkaisuna tällä hetkellä on välttää tämä ongelma. Eli älä lisää elementtiin määriteltyä leveyttä sisätiloiksi, vaan yritä lisätä sisä- tai ulko-tiloja elementin isän ja lapsen elementteihin.

Termin käännökset

  • element: elementti.
  • padding: sisätilat, joista jotkut lähteet kääntävät sen täytteeksi.
  • border: reunat.
  • margin: ulkotilat, joista jotkut lähteet kääntävät sen tyhjäksi tai tyhjäksi reunaksi.

Codew3c:ssä me kutsumme paddingia ja marginia yhtenäisesti sisätiloiksi ja ulkotiloiksi. Reunusten sisäinen tyhjätila on sisätila, reunusten ulkopuolinen tyhjätila on ulkotila, helposti muistettavaa:).