Ieskatieties CSS3 kastē
Ne tik sen, kad mēs izveidojām a lodziņā Web lapā, teiksim ar a div, mēs precizējam 100px gan platumam, gan augstumam, kam seko polsterējums par 10px un robežām 10px arī.
div platums: 100px; augstums: 100px; polsterējums: 10px; robeža: 10px ciets #eaeaea;
Pārlūkprogrammas paplašinās lodziņa izmēru līdz 140px, ja šī summa 140px no kopējā platuma / augstuma sastāv no pievienošanas polsterējums un robežām sekojoši; 100px [platums / augstums] + (2 x 10px [polsterējums]) + (2 x 10px [robeža]).
Tomēr dažreiz šis rezultāts nav tas, ko mēs sagaidām. Dažreiz mums vienmēr ir jābūt kastei 100px neatkarīgi no polsterējuma vai pievienotās robežas.
Lai pārvarētu šādu atkārtotu problēmu, veidojot tīmekļa lapas izkārtojumu, mēs varam izmantot CSS3 kastes izmēri īpašums, lai kontrolētu, kā CSS kaste vajadzētu darboties pārlūkprogrammās.
Izmantojot lodziņu izmēru
The kastes izmēri īpašumam ir divas vērtību iespējas, vispirms satura lodziņā; kas ir noklusējuma vērtība, izmantojot šo vērtību, kastes modelis darbosies, kā mēs iepriekš aprakstījām.
Un otrais ir rāmis, kur tiks aprēķināts kastes izmērs samazinot norādīto satura lielumu ar polsterējumu un pievienotās robežas.
div platums: 100px; augstums: 100px; polsterējums: 10px; robeža: 10px ciets #eaeaea; kastes izmēri: robežkaste; -moz-box-izmēri: rāmis; / * Firefox 1-3 * / -webkit-box-izmēri: robežkaste; / * Safari * /
Piemēram, ja mums ir tāds lodziņš kā iepriekš aprakstītais (100px kvadrāts ar 10 pikseļiem polsterējumam un robežām), satura lielums samazināsies līdz 60px, un kopējais kastes izmērs paliek 100px, kur atņemšanas vienādojumu var raksturot šādi; 100px [platums / augstums] - ((2 x 10px [polsterējums]) + (2 x 10px [robeža])).
- Demo
- Lejupielādēt avotu
Pārlūka atbalsts
The kastes izmēri īpašums ir visās pārlūkprogrammās; Firefox 3.6+, Safari 3, Opera 8.5+ un Internet Explorer 8 un jaunāka versija.
Tātad, ja jūs zināt, ka lielākā daļa jūsu apmeklētāju neizmantos Internet Explorer versijas zem 8, varat izmantot šo noderīgo ieteikumu (pateicoties Paul Irish).
* kastes izmēri: robežkaste; -moz-box-izmēri: rāmis; / * Firefox 1-3 * / -webkit-box-izmēri: robežkaste; / * Safari * /
Iepriekš minētais fragments piemēros kastes izmēri īpašums visiem jūsu tīmekļa lapas elementiem.
Piemērs
Šajā sadaļā mēs jums parādīsim reālu dzīves piemēru par to, kā mēs to varam izmantot kastes izmēri īpašums. Mēs izveidosim vienkāršu navigāciju, pamatojoties uz tālāk redzamo HTML atzīmi, tajā ir piecas saites izvēlne.
Tad mēs pievienosim dažus dekoratīvus stilus; piemēram, iestatiet navigācijas noteikt platumu 500px un saites platums 100px, pēc tam ielieciet saraksta vienumu un dodiet dažādus fonus katrai saiti izvēlnei, lai jūs varētu redzēt atšķirību starp tām.
nav platums: 500px; starpība: 50px auto 0; augstums: 50px; nav ul polsterējums: 0; starpība: 0; nav li float: pa kreisi; nav a displejs: inline-block; platums: 100px; augstums: 100%; fona krāsa: #ccc; krāsa: # 555; teksta apdare: nav; font-family: Arial, sans-serif; fonta lielums: 12pt; līnijas augstums: 300%; teksta saskaņošana: centrs; nav a displejs: inline-block; platums: 100px; augstums: 100%; krāsa: # 555; teksta apdare: nav; font-family: Arial, sans-serif; nav li: n-bērns (1) a fona krāsa: # E9E9E9; kreisajā pusē: 0; nav li: n-bērns (2) a fona krāsa: # E4E4E4; nav li: n-bērns (3) a fona krāsa: #DFDFDF; nav li: n-bērns (4) a fona krāsa: # D9D9D9; nav li: n-bērns (5) a fona krāsa: # D4D4D4; labajā pusē: 0;
Šajā brīdī mūsu navigācija izskatās normāli.
Tomēr problēma radīsies, kad saiti izvēlnē pievienosim kreisās vai labās malas.
nav a left-left: 1px ciets #aaa; labajā pusē: 1px cietais # f3f3f3;
Izvēlne pārplūst uz leju, jo saites platums vairs nav 100px. Tagad tas ir 102px, navigācijas kopējais platums 10px ilgāk, nekā mēs iepriekš norādījām (500px).
Lai pārvarētu šo jautājumu, mums ir jāpiemēro kastes izmēri īpašums:
nav a left-left: 1px ciets #aaa; labajā pusē: 1px cietais # f3f3f3; kastes izmēri: robežkaste; -moz-box-izmēri: rāmis; -webkit-box-izmēri: robežkaste;
- Demo
- Lejupielādēt avotu
Turpmāka lasīšana
Un, visbeidzot, ja jūs esat piedzīvojumu veids un vēlaties dziļāk iedziļināties šajā tēmā, mēs esam izveidojuši dažus atlasītus ieteikumus jums:
- CSS Box modeļa izpratne - Tech Republic
- Kastes izmēra kļūda Firefox - BugZilla
- FTW - Paul īru kaste
