Velikost škatle - CSS-triki

Anonim

box-sizingHotel v CSS nadzoruje, kako je model polje obdelujejo za element se uporablja za.

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

Eden najpogostejših načinov uporabe je uporaba na vseh elementih na strani, vključno s psevdo elementi:

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

To se pogosto imenuje "univerzalno določanje velikosti škatle" in je dober način dela! (Dobesedno), ki widthste ga nastavili, je širina, ki jo dobite, ne da bi morali opravljati miselno matematiko in upravljati kompleksnost, ki izhaja iz širin, ki izhajajo iz več lastnosti. Tu imamo celo dan ozaveščanja o velikosti škatle.

Vrednote

  • content-box: privzeto. Vrednosti širine in višine veljajo samo za vsebino elementa. Oblazinjenje in obroba sta dodana na zunanjo stran škatle.
  • padding-box: Vrednosti širine in višine veljajo za vsebino elementa in njegovo oblazinjenje. Obrobje je dodano na zunanjo stran polja. Trenutno padding-boxvrednost podpira le Firefox .
  • border-box: Vrednosti širine in višine veljajo za vsebino, oblazinjenje in obrobo.
  • inherit: podeduje velikost polja nadrejenega elementa.

Primer

Ta primer slike primerja privzeto content-box(zgoraj) in border-box(spodaj):

Rdeča črta med slikami predstavlja vrednost širine elementov. Upoštevajte, da privzeti element box-sizing: content-box;presega deklarirano širino, ko sta oblazinjenje in obroba dodana na zunanjo stran polja z vsebino, medtem ko se uporabljeni element box-sizing: border-box;popolnoma prilega deklarirani širini.

Uporaba velikosti polja

Recimo, da ste elementu nastavili na width: 100px; padding: 20px; border: 5px solid black;. Privzeto je nastalo polje široko 150 slikovnih pik. To je zato, ker je privzeti model dimenzioniranja polja content-box, ki uporabi deklarirano širino elementa samo za njegovo vsebino, oblazinjenje in obrobo pa postavi zunaj polja elementa. To učinkovito poveča, koliko prostora element zavzame.

Če spremenite box-sizingna padding-box, se oblazinjenje potisne v polje elementa. Nato bi bilo polje široko 110 slikovnih pik, na notranji strani bi bilo 20 slikovnih pik, na zunanji pa 10 pik obrobe. Če želite oblazinjenje in obrobo vstaviti v polje, lahko uporabite border-box. Škatla bi bila nato široka 100 slikovnih pik - 10 pik obrobe in 20 pik oblazinjenja se potisneta v polje elementa.

Demo

Glejte primerjavo pisala vrednosti velikosti škatle s CSS-triki (@ css-triki) na CodePen.

Sorodno

  • width
  • height
  • padding
  • border

Podpora za brskalnik

Chrome Safari Firefox Opera IE Android iOS
Kaj *† 3 * † 1 ‡ 7 * 8 * 2,1 * † Kaj *

* padding-boxni podprto

† starejše različice zahtevajo -webkitpredpono (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozzahteva se predpona do različice 28, od 29. pred.