Dobozos méretezés - CSS-trükkök

Anonim

A box-sizingCSS tulajdonság vezérli, hogy a dobozmodell hogyan kezelje az elemet, amelyre vonatkozik.

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

A használat egyik leggyakoribb módja az oldal összes elemére való alkalmazás, beleértve az álelemeket is:

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

Ezt gyakran „univerzális dobozméretezésnek” nevezik, és ez jó módszer a munkára! A widthbeállított (szó szerinti) a szélesség, amelyet kapsz, anélkül, hogy mentális matematikát kellene végrehajtanod, és kezelnöd kell a több tulajdonságból származó szélességekből fakadó összetettséget. Még egy dobozméret-tudatosítási napot is tartunk errefelé.

Értékek

  • content-box: az alapértelmezett. A szélesség és magasság értékek csak az elem tartalmára vonatkoznak. A párnázatot és a szegélyt hozzáadják a doboz külsejéhez.
  • padding-box: A szélesség és a magasság értékei az elem tartalmára és kitöltésére vonatkoznak. A keret hozzáadódik a doboz külsejéhez. Jelenleg csak a Firefox támogatja az padding-boxértéket.
  • border-box: A szélesség és a magasság értékei a tartalomra, a kitöltésre és a szegélyre vonatkoznak.
  • inherit: örökli a szülő elem dobozméretét.

Példa

Ez a példa kép összehasonlítja az alapértelmezett content-box(felső) és border-box(alsó) képet :

A képek közötti piros vonal az elemek szélességének értékét jelöli. Figyelje meg, hogy az alapértelmezett elem box-sizing: content-box;meghaladja a deklarált szélességet, amikor a párnázatot és a szegélyt hozzáadják a tartalom mező külsejéhez, míg az box-sizing: border-box;alkalmazott elem teljesen belefér a deklarált szélességbe.

Doboz méretezés használata

Tegyük fel, hogy beállított egy elemet width: 100px; padding: 20px; border: 5px solid black;. Alapértelmezés szerint a kapott mező 150 képpont széles. Ez azért van, mert az alapértelmezett dobozméretezési modell content-boxaz elem deklarált szélességét csak a tartalmára alkalmazza, a párnázatot és a szegélyt az elem dobozán kívülre helyezi. Ez hatékonyan megnöveli, hogy az elem mennyi helyet foglal el.

Ha megváltoztatja a box-sizingbeállítást padding-box, a párnázatot az elem dobozába tolja. Ekkor a doboz szélessége 110 képpont, belső részén 20 képpontos párna, kívül pedig 10 képpont szélességű. Ha a párnázatot és a szegélyt a doboz belsejébe szeretné tenni, használhatja border-box. A doboz ekkor 100 képpontos széles lenne - a 10 képpontos szegély és a 20 képpontos párnázás egyaránt az elem dobozába kerül.

Demó

Lásd a CSS-Tricks (@ css-tricks) dobozméretezési értékeinek tollal való összehasonlítását a CodePen-en.

Összefüggő

  • width
  • height
  • padding
  • border

Böngésző támogatás

Króm Szafari Firefox Opera AZAZ Android iOS
Bármi *† 3 * † 1 7 * 8 * 2,1 * † Bármi *

* padding-boxnem támogatott

† régebbi verziókhoz -webkitelőtag szükséges (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozelőtag szükséges a 28. verzióig, előre nem javítva 29-től.