Laatikoiden mitoitus - CSS-temppuja

Anonim

box-sizingOmaisuus CSS ohjaa miten laatikkomallista käsitellään elementille se koskee.

.module ( box-sizing: border-box; )

Yksi yleisimmistä tavoista käyttää sitä on soveltaa sitä kaikkiin sivun elementteihin, mukaan lukien pseudoelementit:

*, *::before, *::after ( box-sizing: border-box; )

Tätä kutsutaan usein universaaliksi laatikoiksi, ja se on hyvä tapa työskennellä! Asetamasi (kirjaimellinen) widthon leveys, jonka saat ilman, että sinun on suoritettava henkistä matematiikkaa ja hallittava monimutkaisuutta, joka tulee useista ominaisuuksista tulevista leveydestä. Meillä on jopa laatikkokokoinen tietoisuuspäivä täällä.

Arvot

  • content-box: oletusarvo. Leveys- ja korkeusarvot koskevat vain elementin sisältöä. Pehmuste ja reunus lisätään laatikon ulkopuolelle.
  • padding-box: Leveys- ja korkeusarvot koskevat elementin sisältöä ja sen täytettä. Raja lisätään laatikon ulkopuolelle. Tällä hetkellä vain Firefox tukee padding-boxarvoa.
  • border-box: Leveys- ja korkeusarvot koskevat sisältöä, täytettä ja reunusta.
  • inherit: perii ylätason elementin laatikon koon.

Esimerkki

Tässä esimerkkikuvassa verrataan oletusarvoa content-box(ylä) ja border-box(ala):

Kuvien välinen punainen viiva edustaa elementtien leveysarvoa. Huomaa, että oletusarvoinen elementti box-sizing: content-box;ylittää ilmoitetun leveyden, kun täyte ja reunus lisätään sisältöruudun ulkopuolelle, kun taas elementti, jolla on box-sizing: border-box;sovellettu, sopii täysin ilmoitetun leveyden sisään.

Laatikon koon käyttäminen

Oletetaan, että asetat elementin arvoksi width: 100px; padding: 20px; border: 5px solid black;. Oletuksena tuloksena olevan laatikon leveys on 150 kuvapistettä. Tämä johtuu siitä, että laatikoiden oletuskokomalli on se content-box, joka käyttää elementin ilmoitettua leveyttä vain sen sisältöön ja sijoittaa täytteen ja reunan elementin laatikon ulkopuolelle. Tämä lisää elementin viemää tilaa.

Jos vaihdat box-sizingkohtaan padding-box, pehmuste työnnetään elementin laatikon sisään. Sitten laatikon leveys olisi 110 kuvapistettä, sisäpuolella 20 kuvapistettä ja ulkopuolelta reunaa 10 kuvapistettä. Jos haluat laittaa pehmusteen ja reunuksen laatikon sisään, voit käyttää sitä border-box. Laatikko olisi tällöin 100 kuvapistettä leveä - 10 kuvapistettä reunaa ja 20 kuvapistettä pehmustetta työnnetään elementin laatikon sisään.

Demo

Katso CSS-Tricksin (@ css-tricks) laatikkokokoarvojen kynän vertailu CodePenistä.

Liittyvät

  • width
  • height
  • padding
  • border

Selaimen tuki

Kromi Safari Firefox Ooppera IE Android iOS
Minkä tahansa *† 3 * † 1 ‡ 7 * 8 * 2,1 * † Minkä tahansa *

* padding-boxei tueta

† vanhemmat versiot vaativat -webkitetuliitteen (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozetuliite vaaditaan versioon 28 asti, sitä ei ole esivalittu vuodesta 29 lähtien.