Dėžutės dydis - CSS-gudrybės

box-sizingCSS nuosavybė kontroliuoja, kaip dėžutė modelis tvarkomi elemento jis taikomas.

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

Vienas iš dažniausiai naudojamų būdų yra jo pritaikymas visiems puslapio elementams, įskaitant pseudo elementus:

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

Tai dažnai vadinama „universaliu dėžutės dydžiu“, ir tai yra geras būdas dirbti! widthJūsų nustatytas (pažodinis) yra jūsų gaunamas plotis, nereikalaujant mentalinės matematikos ir valdant sudėtingumą, atsirandantį dėl pločių, atsirandančių dėl kelių savybių. Čia net rengiame supratimo apie dėžes dydžio dieną.

Vertybės

• content-box: numatytasis. Pločio ir aukščio vertės taikomos tik elemento turiniui. Įdėklas ir apvadas pridedami prie dėžutės išorės.
• padding-box: Pločio ir aukščio vertės taikomos elemento turiniui ir jo užpildymui. Kraštinė pridedama prie dėžutės išorės. Šiuo metu padding-boxvertę palaiko tik „Firefox“ .
• border-box: Pločio ir aukščio vertės taikomos turiniui, užpildymui ir kraštinėms.
• inherit: paveldi pagrindinio elemento langelio dydį.

Pavyzdys

Šis paveikslėlio pavyzdys palygina numatytąjį content-box(viršuje) su border-box(apačioje):

Raudona linija tarp vaizdų rodo elementų pločio vertę. Atkreipkite dėmesį, kad numatytasis elementas box-sizing: content-box;viršija deklaruotą plotį, kai įdėklai ir kraštai pridedami prie turinio laukelio išorės, o elementas su box-sizing: border-box;pritaikytu visiškai atitinka deklaruotą plotį.

Dėžutės dydžio naudojimas

Tarkime, kad nustatėte elementą width: 100px; padding: 20px; border: 5px solid black;. Pagal numatytuosius nustatymus gautas langelis yra 150 taškų pločio. Taip yra todėl, kad numatytasis langelio dydžio modelis yra tas content-box, kuris elemento deklaruojamą plotį taiko tik jo turiniui, įdėdamas pamušalą ir kraštus už elemento laukelio ribų. Tai efektyviai padidina elemento užimamą vietą.

Jei pakeisite box-sizingį padding-box, užpildas bus įstumtas į elemento langelį. Tada dėžutė būtų 110 taškų pločio, viduje būtų 20 taškų, o išorėje - 10 taškų krašto. Jei norite įdėti užpildą ir kraštinę dėžutės viduje, galite naudoti border-box. Tada dėžutė būtų 100 taškų pločio - 10 taškų kraštinės ir 20 taškų užpildas įstumiamos elemento dėžutės viduje.

Demonstracija

Peržiūrėkite „CSS-Tricks“ („@ css-tricks“) „Pen“ palyginimą.

Susijęs

• width
• height
• padding
• border

Naršyklės palaikymas

„Chrome“	„Safari“	„Firefox“	Opera	T.Y	„Android“	„iOS“
Bet koks * †	3 * †	1 ‡	7 *	8 *	2,1 * †	Bet koks *

* padding-boxnepalaikoma

† senesnėms versijoms reikalingas -webkitpriešdėlis („Chrome 1-9“, „Safari 3-5“, „Android 2.1-3.x“)

‡ -mozreikalingas priešdėlis iki 28 versijos, nenurodytas nuo 29.