Žvilgsnis į CSS3 langelį

Šis straipsnis yra dalis mūsų „HTML5 / CSS3 vadovų serija“ - skirta padėti jums tapti geresniu dizaineriu ir (arba) kūrėju. Paspauskite čia pamatyti daugiau tos pačios serijos straipsnių.

Ne taip seniai, kai sukūrėme a dėžė tinklalapyje, tarkim, su a div, mes nurodome 100px tiek pločio, tiek aukščio, po to - paminkštinimas dėl 10px ir sienos 10px taip pat.

 div plotis: 100px; aukštis: 100px; paminkštinimas: 10px; siena: 10px kietas #eaeaea;  

Naršyklės padidins langelio dydį iki 140 pikselių, kai ši suma 140px nuo bendro pločio / aukščio sudarys papildomą langelį. paminkštinimas ir sienos taip: 100px [plotis / aukštis] + (2 x 10px [įdėklas]) + (2 x 10px [border]).

Tačiau kartais šis rezultatas nėra tai, ko mes tikimės. Kartais reikia, kad langelis būtų visada 100px nepriklausomai nuo įdėklo ar pridėtų sienų.

Norint įveikti tokią pasikartojančią problemą kuriant tinklalapio išdėstymą, galime naudoti CSS3 dėžės dydžio turtą kontroliuoti, kaip CSS dėžutės modelis turėtų dirbti naršyklėse.

Naudojant dėžutės dydį

The dėžės dydžio nuosavybė turi dvi vertės parinktis, pirma - turinio dėžutė; kuri yra numatytoji reikšmė, naudojant šią vertę dėžutės modelis elgsis taip, kaip aprašyta aukščiau.

Ir antrasis yra pasienio dėžutė, kur bus apskaičiuotas dėžutės dydis atimant nurodytą turinio dydį su įdėklu ir sienomis.

 div plotis: 100px; aukštis: 100px; paminkštinimas: 10px; siena: 10px kietas #eaeaea; dėžutės dydžio: rėmelis; -moz-box-dydis: rėmelis; / * „Firefox 1-3 * / -webkit-box-sizing“: rėmelis; / * Safari * / 

Pvz., Kai turime tokį langelį, koks buvo aprašytas aukščiau (100 pikselių kvadratas su 10 taškų užpildymui ir sienoms), turinio dydis sumažės iki 60 kartų, ir bendras langelio dydis lieka 100px, kur atimties lygtis gali būti apibūdinta taip: 100px [plotis / aukštis] - ((2 x 10px [įdėklas]) + (2 x 10px [border])).

• Demo
• Atsisiųsti šaltinį

Naršyklės palaikymas

The dėžės dydžio turtas yra visose naršyklėse; „Firefox 3.6+“, „Safari 3“, „Opera 8.5+“ ir „Internet Explorer 8“ ir naujesnės versijos.

Taigi, jei žinote, kad dauguma lankytojų nepasinaudos „Internet Explorer“ versijomis žemiau 8, galite naudoti šią naudingą rekomendaciją (dėka Paul Airijos).

 * dėžutės dydis: rėmelis; -moz-box-dydis: rėmelis; / * „Firefox 1-3 * / -webkit-box-sizing“: rėmelis; / * Safari * / 

Pirmiau nurodytas fragmentas bus taikomas dėžės dydžio visuose jūsų tinklalapio elementuose.

Pavyzdys

Šiame skyriuje parodysime realaus gyvenimo pavyzdį, kaip galime tai panaudoti dėžės dydžio nuosavybė. Mes sukursime paprastą navigaciją, paremtą toliau pateiktu HTML žymėjimu, kuriame bus penki nuorodų meniu.

 
 
1 meniu
 
2 meniu
 
3 meniu
 
4 meniu
 
5 meniu
 
 

Tada pridėsime keletą dekoratyvinių stilių; pvz., nustatykite navigaciją nustatyti plotį 500px ir nuorodos plotis 100px, tada įterpkite sąrašo elementą ir kiekvienam saitų meniu pateikite skirtingus fonus, kad pamatytumėte skirtumą tarp jų.

 nav plotis: 500px; paraštė: 50px auto 0; aukštis: 50px;  nav ul padding: 0; marža: 0;  nav li float: kairėje;  nav a ekranas: inline-block; plotis: 100px; aukštis: 100%; fono spalva: #ccc; spalva: # 555; teksto apdaila: nėra; šrifto šeima: Arial, sans-serif; šrifto dydis: 12pt; linijos aukštis: 300%; teksto derinimas: centras;  nav a ekranas: inline-block; plotis: 100px; aukštis: 100%; spalva: # 555; teksto apdaila: nėra; šrifto šeima: Arial, sans-serif;  nav li: n-vaikas (1) a fono spalva: # E9E9E9; kairėje: 0;  nav li: n-vaikas (2) a fono spalva: # E4E4E4;  nav li: n-vaikas (3) a fono spalva: #DFDFDF;  nav li: n-vaikas (4) a fono spalva: # D9D9D9;  nav li: n-vaikas (5) a fono spalva: # D4D4D4; dešinėje: 0;  

Šiuo metu mūsų navigacija atrodo normalu.

Tačiau problema bus, kai į nuorodų meniu pridėsime kairę ar dešinę sienas.

 nav a left-left: 1px kietas #aaa; dešinėje: 1px kietas # f3f3f3;  

Meniu bus perpildyta į apačią, nes nuorodos plotis nebėra 100px. Tai dabar 102px, navigacijos bendras plotis 10px ilgiau, nei mes anksčiau nurodėme (500px).

Norint įveikti šią problemą, turime taikyti dėžės dydžio turtas:

 nav a left-left: 1px kietas #aaa; dešinėje: 1px kietas # f3f3f3; dėžutės dydžio: rėmelis; -moz-box-dydis: rėmelis; -webkit-box-dydis: rėmelis;  

• Demo
• Atsisiųsti šaltinį

Papildoma literatūra

Ir, galiausiai, jei esate nuotykių tipas ir norite giliau įsilieti į šią temą, mes sudėjome keletą pasirinktų nuorodų:

• CSS Box modelio - Tech Respublikos supratimas
• „Firefox“ - „BugZilla“ dėžutės dydžio klaidos
• Dėžės dydis FTW - Paul Irish