Termins "kaste modelis" tiek bieži
izmanto cilvēki, runājot par CSS balstītas izkārtojumu un mājaslapu izstrāde. Ne visi saprot, ko nozīmē šī,
lai gan, un ne visi saprot, kāpēc tas ir tik svarīgi.
Jebkurš HTML elementu var uzskatīt kaste, un
tā kaste modelis attiecas uz visiem HTML (un XHTML) elementiem.
Kaste modelis ir specifikācija, kas nosaka, kā
kastē un tās atribūti ir saistītas viena ar otru. Savā visvienkāršākajā veidā,
kaste modelis stāsta pārlūkiem, ka kaste definēts kā platums 100 pikseļi un
augstums 50 pikseļi, varēja izdarīt 100 pikseļi plats un 50 pikseļi garš.
Tur ir vairāk, jūs varat pievienot kastē, lai
gan, piemēram, apdare, piemales robežām utt attēlus vajadzētu palīdzēt
izskaidrot, ko es esmu par, lai palaistu cauri:
Kā jūs varat redzēt, kaste sastāv no mājaslapu izstrāde četrām dažādām daļām.
Ārpus viens, starpība, ir pilnīgi neredzams. Tā nav fona krāsu, un netraucēs
elementus aiz tā. Starpība ir ārpus otrā daļa, kas ir robeža. Robeža iezīmē
redzamā daļa elementu. Iekšpusē robežas ir trešā daļa no kastes, polsterējums,
un tad iekšā, ka saturs platība no kastes. Polsterējums nosaka telpu starp
saturu lodziņā jomā un robežas.
(Ievērojiet, ka šajā attēlā, tikai no trim
robeža sagatavots kas faktiski būtu redzami ir nepārtraukta līnija - Pārtrauktā
ailes, lai palīdzētu pierādīt kaste modeli).
Definējot platākas un jūsu kastē, izmantojot
CSS augums, ja ir definēta nevis visu platību, ko aizņem saturu, polsterējums,
robežas un normu. Jūs faktiski tikai definējot satura jomā pati - mazliet,
tiesības vidū. Polsterējumu, robežu un starpība jāpieskaita, ka, lai aprēķinātu
kopējo telpu, ko aizņem kastē. (No šī brīža, mēs izmantosim platumu
demonstrācijām, bet tie paši principi attiecas gan uz platumu un augstumu).
kaste {
platums: 200px;
robeža: 10px cieta #
99c;
polsterējums: 20px;
rezervi: 20px;
}
Iepriekš CSS, piemēro kastē, tas nozīmētu, ka
šī kaste aizņem 300 pikseļi no kosmosa horizontāli lapā. No kastē saturs varētu
ieņemt 200 šīs pikseļi (raustītu līniju pievienotas, lai pierādītu malas zonā
aizņem kastē):
Iepriekš attēlu, jūs varat redzēt, ka gaiši
zilā platība ir 240 pikseļi plats (200 pikseļi satura plus 20 pikseļi
polsterējums abās pusēs). Robeža ir 10 pikseļi plats nu sānu, padarot kopējo
platumu, tostarp pierobežas 260 pikseļi. Starpība ir 20 pikseļi nu sānu,
padarot kopējo platumu no kastes 300 pikseļi.
Praksē tas var radīt zināmas neskaidrības.
Piemēram, ja man ir 100 pikseļu plašu pieejamo vietu, un vēlas, lai aizpildītu
to ar gaiši sarkanā kaste ar tumši sarkanu maliņu un nelielu daudzumu
polsterējumu, tas būtu ļoti viegli rakstīt CSS piemēram, tā:
kaste {
platums: 100px;
border: 1px solid #
900;
polsterējums: 10px;
rezervi: 0;
fons: # maksa;
}
(No 0 deklarācija, kā izmanto starpības virs,
neprasa vienība jāpievieno vērtība nav 0 prasība par vienību, piemēram px
pikseļiem.. Tāpat, kaut arī "fons" ir definēta kā saīsināts īpašumu,
tas ir plašāk atbalstīta nekā vairāk pareizo "fona krāsa".)
Tomēr, kas mums nedod ir 100 pikseļu plašu
kastē, kā platums deklarācija definē satura jomā no kastes. Saturs platība
kastē būs 100 pikseļi - kopējais platums no kastes, kā noteikts iepriekš būs
122 pikseļi:
Lai noteiktu iepriekš lodziņu tikai ieņem 100
pikseļi horizontāli, jums būtu nepieciešams, lai noteikt platumu satura jomā
būtu 100 pikseļi mīnus polsterējumu un mīnus robežas, šajā gadījumā 78 pikseļi,
piemēram, šādi:
kaste {
platums: 78px;
border: 1px solid #
900;
polsterējums: 10px;
rezervi: 0;
fons: # maksa;
}
Lai aprēķinātu kopējo platumu kastē, ieskaitot
visus apdare, robežu un rezervju, jūs varētu izmantot šādu formulu:
Kopējais kaste platums = saturs laukums
platums + kreisais polsterējums + labais polsterējums + kreisā apmale + labais
robeža + kreisā mala + labā mala
Savienojamība
Šajā brīdī, jums tagad ir laba izpratne par
to, ko kaste modelis ir, un cik kastes jāārstē ar dažādām pārlūkprogrammām.
Tomēr, kā jūs drīz uzzināsiet (ja jūs nezināt jau), ne katrs pārlūks dara, kā tas
ir paredzēts. Lai izmantotu kastes, un vēl plašāk veikt lielāko daļu CSS savā
mājas lapā, jums būs nepieciešams apzināties, kā dažādi pārlūki ārstēt kastes
praksē un kā pārvarēt un strādāt ap problēmu, ko šie īpatnībām.
Top iecirtums
Vairums pārlūkprogrammu publiskotie pēdējos
gados nav problēmu ar kastes un apmetuma kastes pareizi. Opera 6 un 7, Mozilla
1 (un vēlāk arī citiem pārlūkiem, pamatojoties uz Gecko dzinēja kā 7 Netscape,
Camino un Firefox un citām atvasinājumus), Safari, Konquerer (un atvasinājumi)
un par Mac Internet Explorer 5 visi ir labs paraugs tam, kā interneta pārlūks
vajadzētu uzvesties, visi renderēšanas kastes nevainojami. Windows 6 IE arī
sniegs kaste pareizi, kamēr par lapu ir pareiza.
Whoops, kundze Miggins, jūs sēžat On My
artišokiem
Dažas pārlūkprogrammas nerādīt kastē pareizi.
Atšķirībā tiem turpmāk šeit, šie pārlūki ir pietiekami plaši izmanto tīmeklī,
ka tas parasti ir vērts pūles, lai tiktu galā ar šo problēmu. Ir dažādas
metodes, kā to izdarīt, daži labāk nekā citi, kas sekos tālāk. Vislielākais
vidū ar problēmām pārlūkiem ir interneta Explorers 4 un 5 un Internet Explorer
6. 6 IE ir viegli strādāt apkārt, pievienojot pareizu DTD (kas jums būtu jādara
jebkurā gadījumā).
Internet Explorer 5 ir galvenais iemesls ir
kaste modelis problēmu vispār. Tas, diemžēl, nav izpildiet vienkāršu definīciju
kastē izkārtojumu, kā noteikts ar W3C. Kad jūs noteikt platumu lodziņā un tas
ir taisīts IE5, nevis šī platuma satura noteikšanas platību kastē, tas ietver
robežas un polsterējums. Starpības pievienots pie satura platumu pareizi, bet
polsterējums un robežas vēl nav. Diemžēl, tas atstāj mūs ar dažiem nepatīkamiem
izvēli:
Izmantojiet box modelis banalizēt mājaslapu
izstrāde
Hack ir diemžēl kaut nepieciešamība. Bet daži
varētu apgalvot, ka izmantojot mājaslapu izstrāde, piemēram, tas ir pilnīgi
trūkst punkts, izmantojot CSSmājaslapu izstrāde, tirdzniecības nepieciešamība
un no IE5 izplatība atstāj mūs ar maz ceļu izvēli. IE5 kaste modelis banalizēt
ir izmanto visā internetā un ir radījuši daudz variantu.
Pievienot papildu kodu
Dažas varētu apsvērt šo mazliet
"labāks" veids, kā strādāt ap šo problēmu. Nevis pievienojot stila
lapas banalizēt, jūs var ligzdot ietilpstošie elementi viens otru. Pievienojot
div citā div nozīmē, ka nevis izmantojot polsterējumu, jūs varat izmantot tikai
rezerves, kas ir apstrādāti pareizi IE5. Kā ar box modelis banalizēt, tas ir
tālu no ideāls risinājums, bet ir dažas citas iespējas, ja jūs vēlaties vietu,
lai izskatās pats IE5 kā citās vairāk spēj pārlūkprogrammām.
No vienas puses, pārlūkprogrammām, ka es esmu
par to pieminēt, ir šausmīgi, visi nespēj lai padarītu vienkāršu lodziņu
pareizi vienu iemeslu vai citu. Par daudz pozitīvas nots, lietotāji šo
pārlūkprogrammu, pārsvarā vecās versijas pašreizējo pārlūkprogrammu, veido ļoti
mazu, un nepārtraukti sarūk, daļu no interneta lietotājiem. Kamēr jūs varētu,
iespējams, atrast PROFILAKSE par veiktajām displeja kastes šajās pārlūkiem
bugs, tas ir gandrīz noteikti nav vērts pūles - jums ir iespējams radīt sev
vairāk ļauna nekā laba, ar mājaslapu izstrāde par šiem!
Netscape 4 lāde modelis ir briesmīga, bet vēl
sliktāk, vienkāršas box modelis hacks, lai atrisinātu problēmu par IE5 un IE6
mājaslapu izstrāde Netscape 4. Netscape 4 stils lapa atbalsts ir neizmērojams
kopumā, un tas tiek atbalstīta mazāk un mazāk. Lai gan tas ir stingri personīgā
izvēle, es nedomāju, ka tas ir vērts laiku un pūles, lai atbalstītu Netscape 4
vairāk - tas vienkārši nav pietiekami izmantoti, un lietotāju skaits ir tikai
kādreiz gatavojas sarukt.
Internet Explorer 4 cieš, būtībā, tāda pati
problēma kā IE5. Tā izturas kastes ir ļoti līdzīgi. Tomēr tas krīt pār jo daudz
vairāk veidos, un daudzi no pieejamajiem mājaslapu izstrāde IE4. Kā tas ir arī
izmanto maz cilvēku, un šis skaits ir pilināmā, daudzi dizaineri to ignorēt.
Kāda nākotne turēt?
CSS3 sola mums iespēju noteikt, kā mēs
vēlamies, lietotāja aģents, lai ārstētu kastes, un norādīt, kuri kastē modeli
mēs vēlamies izmantot. Atbalsts CSS3 līmenī, kas būs iespējams, ir daudzi gadi
vēl. Līdz tam, mēs iestrēdzis ar CSS2 box modelis, un, kamēr IE5 joprojām
izmanto ievērojamu daļu no tīmekļa iedzīvotājiem, mēs
gatavojamies ir problēmas ar kastēm.
Nav komentāru:
Ierakstīt komentāru