Kasti suurus - CSS-trikid

Anonim

box-sizingVara CSS kontrollib, kuidas kasti mudel käideldakse elemendi see kehtib.

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

Üks levinumaid kasutusviise on selle rakendamine lehe kõigi elementide jaoks, sealhulgas pseudoelemendid:

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

Seda nimetatakse sageli universaalseks kasti suuruse määramiseks ja see on hea viis töötada! widthTeie määratud (sõna otseses mõttes) on laius, mille saate, ilma et peaksite tegema vaimset matemaatikat ja haldama keerukust, mis tuleneb mitmetest omadustest tulenevatest laiustest. Siinkandis on meil isegi kastide suuruse suurendamise teadlikkuse päev.

Väärtused

  • content-box: vaikimisi. Laiuse ja kõrguse väärtused kehtivad ainult elemendi sisule. Polsterdus ja ääris lisatakse kasti välisküljele.
  • padding-box: Laiuse ja kõrguse väärtused kehtivad elemendi sisule ja selle täidisele. Ääris lisatakse kasti välisküljele. Praegu toetab padding-boxväärtust ainult Firefox .
  • border-box: Laiuse ja kõrguse väärtused kehtivad sisule, täidisele ja äärisele.
  • inherit: pärib vanema elemendi kasti suuruse.

Näide

Selle näitepildi abil võrreldakse vaikimisi content-box(ülalt) ja border-box(all):

Piltide vaheline punane joon tähistab elementide laiuse väärtust. Pange tähele, et vaikeväärtusega element box-sizing: content-box;ületab deklareeritud laiuse, kui polsterdus ja ääris lisatakse sisukasti välisküljele, samal ajal kui rakendatud element box-sizing: border-box;sobib täielikult deklareeritud laiusesse.

Kasti suuruse kasutamine

Oletame, et määrasite elemendi väärtuseks width: 100px; padding: 20px; border: 5px solid black;. Vaikimisi on saadud kasti laius 150 pikslit. Selle põhjuseks on kasti vaikimisi suuruse mudel content-box, mis rakendab elemendi deklareeritud laiust ainult selle sisule, asetades polstri ja piiri väljaspool elemendi kasti. See suurendab elemendi tegelikku ruumi võtmist.

Kui muudate box-sizinget padding-boxtuleb polster surutakse sees elemendi kasti. Siis oleks kasti laius 110 pikslit, siseküljel 20 pikslit ja välisküljel 10 pikslit. Kui soovite polsterduse ja äärise kasti sisse panna, võite seda kasutada border-box. Kast oleks siis 100px lai - nii 10px ääris kui 20px polsterdused surutakse mõlemad elemendi kasti sisse.

Demo

Vaadake CodePeni lehel CSS-Tricks (@ css-tricks) kasti suuruse väärtuste võrdlust.

Seotud

  • width
  • height
  • padding
  • border

Brauseri tugi

Chrome Safari Firefox Ooper IE Android iOS
Mis tahes * † 3 * † 1 ‡ 7 * 8 * 2,1 * † Mis tahes *

* padding-boxei toetata

† vanemad versioonid vajavad -webkiteesliidet (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozvajalik on eesliide kuni versioonini 28, eesliiteta alates 29. kuupäevast.