Vaata CSS3 kasti suurust

See artikkel on osa meie "HTML5 / CSS3 juhendite seeria" - pühendatud selleks, et aidata teil paremini disainer ja / või arendaja. Kliki siia et näha sama seeria rohkem artikleid.

Mitte nii kaua aega tagasi, kui loome a kasti veebilehel, ütleme a-ga div, me täpsustame 100tk nii laiuse kui ka kõrguse puhul, millele järgneb polsterdus jaoks 10tk ja piirid umbes 10tk samuti.

 div laius: 100 px; kõrgus: 100 px; polsterdus: 10px; piir: 10px tahke #eaeaea;

Brauserid laiendavad kasti suurust 140 pikslisse, kus see summa 140px kogu laiusest / kõrgusest moodustab selle lisamise. polsterdus ja piirid järgnevalt; 100px [laius / kõrgus] + (2 x 10px [polsterdus]) + (2 x 10px [piiri]).

Kuid mõnikord ei ole see tulemus see, mida me ootame. Mõnikord vajame alati kasti 100tk olenemata polsterdusest või lisatud piiridest.

Sellise korduva probleemi lahendamiseks veebilehe paigutuse loomisel saame kasutada CSS3 kastide suurus vara kontrollimiseks CSS kasti mudel peaks töötama brauserites.

Kasti suuruse kasutamine

The kastide suurus Omandil on kaks väärtusvõimalust, kõigepealt sisu-kast; see on vaikeväärtus, kui selle väärtuse kasutamisel käitub kasti mudel nagu eespool kirjeldatud.

Ja teine on kasti, kus kasti suurus arvutatakse vähendades määratud sisu suurust koos polstriga ja piiridega.

 div laius: 100 px; kõrgus: 100 px; polsterdus: 10px; piir: 10px tahke #eaeaea; kastide suurus: piirikast; -moz-box-sizing: piirikast; / * Firefox 1-3 * / -webkit-box-sizing: piiri-box; / * Safari * /

Näiteks kui meil on kast nagu eespool kirjeldatud (100px ruut 10 piksliga polsterdamiseks ja piirideks), väheneb sisu suurus kuni 60 pikslit, ja kasti kogu suurus jääb 100tk, kus lahutamise võrrandit võib kirjeldada järgmiselt; 100px [laius / kõrgus] - ((2 x 10px [polsterdus]) + (2 x 10px [piiri])).

Demo
Allalaadimise allikas

Brauseri tugi

The kastide suurus vara on toetab kõiki brausereid; Firefox 3.6+, Safari 3, Opera 8.5+ ja Internet Explorer 8 ja uuemad.

Seega, kui teate, et enamik teie külastajaid ei kasuta allpool 8 Internet Exploreri versioone, saate seda kasulikku soovitust kasutada (tänu Paul Irish'ile).

 * kasti suurus: piirikast; -moz-box-sizing: piirikast; / * Firefox 1-3 * / -webkit-box-sizing: piiri-box; / * Safari * /

Ülaltoodud fragmenti rakendatakse kastide suurus kõik oma veebilehe elemendid.

Näide

Selles osas näitame teile reaalset näidet selle kohta, kuidas seda kasutada kastide suurus vara. Loome lihtsa navigeerimise, mis põhineb allpool toodud HTML-märgistusel, viies linki menüüs.

  Menüü 1
 Menüü 2
 Menüü 3
 Menüü 4
 Menüü 5

Seejärel lisame mõned dekoratiivsed stiilid; seadistage navigeerimine fikseerige laius 500tk ja lingi laius 100px, seejärel sisesta loendiüksus ja anna igale lingimenüüle erinevad taustad, et näha nende vahelist erinevust.

 nav laius: 500 px; marginaal: 50px auto 0; kõrgus: 50 px;  nav ul padding: 0; varu: 0;  nav li float: vasakule;  nav a kuva: inline-block; laius: 100 px; kõrgus: 100%; taustavärv: #ccc; värv: # 555; teksti kaunistus: mitte; font-family: Arial, sans-serif; fondi suurus: 12pt; joone kõrgus: 300%; teksti joondamine: keskus;  nav a kuva: inline-block; laius: 100 px; kõrgus: 100%; värv: # 555; teksti kaunistus: mitte; font-family: Arial, sans-serif;  nav li: n-laps (1) a taustavärv: # E9E9E9; vasakpoolne: 0;  nav li: n-laps (2) a taustavärv: # E4E4E4;  nav li: n-laps (3) a taustavärv: #DFDFDF;  nav li: n-laps (4) a taustavärv: # D9D9D9;  nav li: n-laps (5) a taustavärv: # D4D4D4; parempoolne: 0;

Praegu näib meie navigatsioon olevat normaalne.

Probleem ilmneb aga siis, kui lisame linkimenüüsse vasakule või paremale piiri.

 nav a border-left: 1px tahke #aaa; paremal pool: 1px tahke # f3f3f3;

Menüü liigub põhja, kuna lingi laius ei ole enam 100tk. See on praegu 102tk, navigeerimise kogu laius 10tk kauem, kui me oleme eespool nimetanud (500tk).

Selle probleemi lahendamiseks peame rakendama kastide suurus vara:

 nav a border-left: 1px tahke #aaa; paremal pool: 1px tahke # f3f3f3; kastide suurus: piirikast; -moz-box-sizing: piirikast; -webkit-box-sizing: piiri-box;

Demo
Allalaadimise allikas

Lisalugemist

Ja lõpuks, kui olete seikluslik tüüp ja soovite selle teema juurde sügavamalt kaevata, oleme koostanud teile mõned valitud viited:

CSS Box Model - Tech Republici mõistmine
Kasti suuruse viga Firefoxis - BugZilla
Kasti suuruse määramine FTW - Paul iiri