Veľkosť škatule - Triky CSS

Anonim

box-sizingVlastnosť CSS určuje, ako je model box s ním po prvok sa vzťahuje k.

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

Jedným z najbežnejších spôsobov použitia je použitie na všetky prvky na stránke vrátane pseudo prvkov:

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

Toto sa často nazýva „univerzálna veľkosť balenia“ a je to dobrý spôsob práce! Nastavený (literál) widthje šírka, ktorú získate, bez toho, aby ste museli vykonávať mentálnu matematiku a zvládať zložitosť, ktorá pochádza zo šírok, ktoré pochádzajú z viacerých vlastností. Máme tu dokonca deň povedomia o veľkosti boxu.

Hodnoty

  • content-box: predvolená hodnota. Hodnoty šírky a výšky sa vzťahujú iba na obsah prvku. Výplň a lem sú pridané k vonkajšej strane škatule.
  • padding-box: Hodnoty šírky a výšky sa vzťahujú na obsah prvku a jeho výplň. Okraj je pridaný k vonkajšej strane škatule. Túto padding-boxhodnotu v súčasnosti podporuje iba Firefox .
  • border-box: Hodnoty šírky a výšky sa použijú pre obsah, výplň a orámovanie.
  • inherit: dedí veľkosť poľa nadradeného prvku.

Príklad

Tento príklad obrázka porovnáva predvolené hodnoty content-box(hore) s border-box(dole):

Červená čiara medzi obrázkami predstavuje hodnotu šírky prvkov. Všimnite si, že element s predvolenou box-sizing: content-box;hodnotou presahuje deklarovanú šírku, keď sú výplne a orámovanie pridané k vonkajšej strane poľa obsahu, zatiaľ čo element s box-sizing: border-box;aplikovaným úplne zapadá do deklarovanej šírky.

Použitie veľkosti krabice

Povedzme, že ste nastavili prvok na width: 100px; padding: 20px; border: 5px solid black;. V predvolenom nastavení je výsledný rámček široký 150 pixelov. Je to tak preto, lebo je predvolený model dimenzovania poľa content-box, ktorý aplikuje deklarovanú šírku prvku iba na jeho obsah a umiestňuje výplň a orámovanie mimo rámčeka prvku. To efektívne zvyšuje, koľko miesta prvok zaberá.

Ak zmeníte hodnotu box-sizingna padding-box, výplň sa zasunie do poľa prvku. Krabica by potom mala šírku 110 pixelov, z vnútornej strany by mala mať veľkosť 20px a na vonkajšej strane okraj 10px. Ak chcete vložiť výplň a okraj dovnútra krabice, môžete použiť border-box. Krabica by potom mala šírku 100 pixelov - 10px okraja a 20px polstrovania sú obidve vložené do skrinky prvku.

Ukážka

Pozrite si Pen Porovnanie hodnôt veľkosti boxu pomocou CSS-Tricks (@ css-tricks) na CodePen.

Súvisiace

  • width
  • height
  • padding
  • border

Podpora prehľadávača

Chrome Safari Firefox Opera IE Android iOS
Akýkoľvek *† 3 * † 1 ‡ 7 * 8 * 2,1 * † Akýkoľvek *

* padding-boxnepodporované

† staršie verzie vyžadujú -webkitpredponu (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozVyžaduje sa predpona do verzie 28, bez predvoľby k 29. dňu.