CSS lodziņa modelis izskaidrots ar piemēriem.

Šodien es izskaidrošu lodziņa modeli, izmantojot CSS fona klipu un fona izcelsmes īpašumu. Kas ir fona klipa un fona izcelsmes rekvizīti? Kam tie tiek izmantoti, un kāda ir atšķirība starp katru no tiem?

Tas ir jautājums, kas no iesācēju puses līdz vidējam Web izstrādātāju līmenim ir prātā. Daži no viņiem to nedaudz pārzina, un citi joprojām domā, kur viņi varētu izmantot šīs 2 īpašības.

Nu, pirms jūs saprotat šīs 2 īpašības, jums ir jāsaprot CSS lodziņa modelis. Tātad, sāksim ar to.

Vispirms izveidojiet “div” un ielieciet “p” tagu tā iekšpusē, piemēram,

kāds saturs šeit ...

un pēc tam piešķiriet tam dažus stilus.

Kā redzat, elementam “div” mēs neesam piešķīruši nekādu polsterējumu vai apmali, tāpēc “div” elementam vēl nav polsterējuma vai apmales kastes, un visa kaste tiek uzskatīta par satura lodziņu.

Kā parādīts šajā attēlā zemāk.

Jūs varat pārbaudīt sevi, atverot hroma izstrādātāja rīku

Tagad “div” piešķiriet 50xx polsterējumu no augšas, apakšas, pa kreisi, pa labi.

div {
 fons: # 666;
 platums: 300 pikseļi;
 augstums: 250 pikseļi;
 polsterējums: 50 pikseļi; // polsterējums no augšas, apakšas, pa kreisi, pa labi
}

Tagad mums ir polsterējuma kaste ar 50 pikseļiem, un satura kastīte ir polsterējuma kastes iekšpusē, kā parādīts šajā attēlā zemāk.

Tagad mums beidzot ir polsterējuma kaste ar 50 pikseļiem

Tagad noņemsim elementa “p” platumu, lai tas paplašinātos, lai uzņemtu visu satura lodziņa platumu.

p {
 fons: sarkans;
}

Rezultātu var redzēt zemāk redzamajā attēlā.

“P” elements izvēršas, lai aizpildītu visu satura lodziņa platumu

Tagad, pieņemsim, ka jūs pievienojat fona attēlu “div” un iestatāt tā fona izmēru uz “satur”, lai tas pielāgotu tā izmēru lodziņā, kā arī jūs piešķirat tam kādu apmali, jo bez apmales nav apmales.

div {
 fons: # 666 URL ('https://bit.ly/2gzkSPX') neatkārtot;
 fona izmērs: saturēt;
 apmale: 10 pikseļi melni melna;
 platums: 300 pikseļi;
 augstums: 250 pikseļi;
 polsterējums: 50 pikseļi;
}

Tad tas izskatīsies šādi, kā parādīts attēlā zemāk.

To var arī pārbaudīt, dodoties uz hroma izstrādātāja rīku un virzot kursoru virs lodziņa modeļa, kā parādīts attēlā

Pēc noklusējuma div fonu izcelsme ir iestatīta uz polsterējuma kārbu, un tas nozīmē, ka attēls sāksies no apmales lodziņa, un tas būs redzams arī satura lodziņā, jo satura lodziņš atrodas polsterējuma kastē.

fona izcelsme: polsterējuma kaste; / * noklusējuma vērtība * /

Teiksim, ka mēs vēlamies, lai attēls sāktu no polsterējuma kastes, bet mēs vēlamies atklāt tikai tā attēla daļu, kas atrodas satura lodziņā, tad div fonu klips ir jāiestata satura lodziņā.

div {
 fons: # 666 URL ('https://bit.ly/2gzkSPX') neatkārtot;
 fona izmērs: saturēt;
 fona klips: satura lodziņš;
 apmale: 10 pikseļi melni melna;
 platums: 300 pikseļi;
 augstums: 250 pikseļi;
 polsterējums: 50 pikseļi;
}

Zemāk attēlā redzamos rezultātus var redzēt, ka ir redzama tikai tā attēla daļa, kas atrodas satura lodziņā, bet attēls sākas no polsterējuma kastes, jo tā ir “background-orgin” noklusējuma vērtība.

Kā redzat, ir redzama tikai tā attēla daļa, kas atrodas satura lodziņā, un pārējā daļa ir paslēpta

Tagad parādīsim arī fona attēla daļu, kas atrodas polsterējuma kastē, jo mums divdona fona klips ir jāiestata atpakaļ polsterējuma kastē, kas bija noklusējuma vērtība, pirms mēs to mainījām.

div {
 fons: # 666 URL ('https://bit.ly/2gzkSPX') neatkārtot;
 fona izmērs: saturēt;
 fona klips: polsterējuma kaste;
 apmale: 10 pikseļi melni melna;
 platums: 300 pikseļi;
 augstums: 250 pikseļi;
 polsterējums: 50 pikseļi;
}

Zemāk redzamajos rezultātos var redzēt, ka tagad ir redzama arī tā attēla daļa, kas nonāk polsterējuma kastē, jo fona klipu esam iestatījuši atpakaļ polsterējuma kastē.

Tagad mēs varam redzēt arī tā attēla daļu, kas atrodas polsterējuma kastē

Tagad pārliecināsimies, ka mūsu div fona attēls sākas no apmales lodziņa, un tāpēc mums “div” ir jāpiešķir apmales rāmja izcelsme. Bet vispirms palielināsim apmales izmēru, lai pamanītu atšķirību.

div {
 fons: # 666 URL ('https://bit.ly/2gzkSPX') neatkārtot;
 fona izmērs: saturēt;
 fona izcelsme: robežas kārba;
 fona klips: polsterējuma kaste;
 apmale: 20 pikseļi melni melna; / * Tagad apmales platums ir 20 pikseļi * /
 platums: 300 pikseļi;
 augstums: 250 pikseļi;
 polsterējums: 50 pikseļi;
}

Kā redzams zemāk redzamajā attēlā, tā kā fona attēls tagad sākas ar apmales lodziņu, tāpēc nelielu attēla daļu sedz melna apmale, citiem vārdiem sakot, attēla daļa atrodas aiz melnās apmales.

Tagad attēls sākas no apmales

Tagad, lai pierādītu savu viedokli, ka attēls sākas no apmales un tieši tāpēc neliela attēla daļa atrodas aiz melnās apmales, piešķirsim apmalei nelielu necaurredzamību, lai tā varētu izbalināt un mēs varētu redzēt to attēla daļu, kas ir aiz robežas.

div {
 fons: # 666 URL ('https://bit.ly/2gzkSPX') neatkārtot;
 fona izmērs: saturēt;
 fona izcelsme: robežas kārba;
 fona klips: polsterējuma kaste;
 apmale: 20 pikseļi cietā rgba (0,0,0,0,5); / * izmantojot rgba () * /
 platums: 300 pikseļi;
 augstums: 250 pikseļi;
 polsterējums: 50 pikseļi;
}
Šeit jūs varat redzēt attēlu aiz izbalēšanas robežas

Šeit jūs tagad varat redzēt attēla daļu, kas atrodas aiz robežas, un tas arī pierāda manu viedokli, ka tagad attēls sākas no apmales lodziņa, jo mēs iestatām fona izcelsmi uz robežas lodziņu.

Tagad, kad jūs zināt atšķirību starp fona izcelsmi un fona klipu, kā arī zināt arī par CSS kastes modeli, ir pienācis laiks jums iet un izveidot ar to pārsteidzošu saturu. #Goodluck

Ja esat nokavējis manu iepriekšējo rakstu par tīmekļa pieejamību, šeit ir saite uz to, neaizmirstiet to izlasīt. KLIKŠĶINIET ŠEIT