CSS kasti mudelit selgitati näidetega.

Täna selgitan kasti-mudelit CSS-i taustklipi ja taust-päritolu atribuutide abil. Mis on taustklipi ja tausta päritolu atribuudid? Milleks neid kasutatakse ja mis erinevus nende vahel on?

Noh, see on küsimus, mis ulatub nii algajate kui ka veebiarendajate keskmisele tasemele. Mõni neist on sellega mõneti tuttav ja teised alles mõtlevad, kus neid 2 omadust kasutada.

Noh, enne kui saate aru neist kahest atribuudist, peate mõistma CSS-kasti mudelit. Alustame siis sellest.

Kõigepealt looge “div” ja pange sellesse sees “p” silt,

natuke sisu siin ...

ja siis anna sellele mõned stiilid.

div {
 taust: # 666;
 laius: 300 pikslit;
 kõrgus: 250 pikslit;
}
p {
 laius: 200 pikslit;
 taust: punane;
}

Nagu näete, et me pole div-elemendile polstrit ega ääriseid andnud, siis pole div-elemendil veel polsterdus- ega äärisekasti ning tervet kasti peetakse sisukastiks.

Nagu sellel pildil allpool näidatud.

Saate end kontrollida, avades kroomiarendaja tööriista

Andke nüüd div-le mõni 50px polsterdus ülalt, alt, vasakult ja paremalt.

div {
 taust: # 666;
 laius: 300 pikslit;
 kõrgus: 250 pikslit;
 polster: 50 px; // polsterdus ülalt, alt, vasakult, paremalt
}

Nüüd on meil 50-kordne polsterduskarp ja infokast asub polsterduskarbis, nagu on näidatud sellel pildil allpool.

Nüüd on meil lõpuks 50-kordne polsterdus

Eemaldame nüüd laiuse elemendist p, nii et see laieneb, et võtta sisukasti kogu laius.

p {
 taust: punane;
}

Tulemust näete allpool oleval pildil.

P-element laieneb, et võtta sisukasti kogu laius

Ütleme nii, et lisate taustapildi jaotisse „div” ja määrate selle tausta suuruseks „sisaldama”, et muuta selle suurus kasti sees ja annate sellele ka mõne äärise, kuna ilma ääriseta pole äärekasti.

div {
 taust: # 666 URL ('https://bit.ly/2gzkSPX') ei korda;
 tausta suurus: sisaldama;
 ääris: 10 pikslit must must;
 laius: 300 pikslit;
 kõrgus: 250 pikslit;
 polster: 50 px;
}

Siis näeb see välja selline, nagu on näidatud alloleval pildil.

Seda saate kontrollida ka minnes kroomiarendaja tööriista ja hõljutades kursorit kastiga mudeli kohal, nagu pildil näidatud

Vaikimisi on div-i taust-päritolu seatud polsterduskasti ja see tähendab, et pilt algab äärisekastist ning on nähtav ka sisukasti, kuna sisu kast asub polsterduskasti sees.

taust-päritolu: polsterkast; / * vaikeväärtus * /

Ütleme nii, et tahame, et pilt algaks polsterduskastist, kuid me tahame paljastada ainult selle pildi osa, mis asub sisukastis, siis peame määrama divi taustklipi sisukasti.

div {
 taust: # 666 URL ('https://bit.ly/2gzkSPX') ei korda;
 tausta suurus: sisaldama;
 taustklipp: sisukast;
 ääris: 10 pikslit must must;
 laius: 300 pikslit;
 kõrgus: 250 pikslit;
 polster: 50 px;
}

Alloleval pildil näete tulemusi, et ainult pildikogus, mis asub sisukastis, on nähtav, kuid pilt algab polsterduskastist, kuna see on vaikimisi väärtus “taust-orgin”.

Nagu näete, on nähtav ainult osa pildist, mis asub sisukasti sees ja ülejäänud on peidetud

Vaatame nüüd ka taustapildi osa, mis tuleb polsterduskasti, selleks peame div-i taustklipi tagasi panema polsterduskasti, mis oli vaikeväärtus enne selle muutmist.

div {
 taust: # 666 URL ('https://bit.ly/2gzkSPX') ei korda;
 tausta suurus: sisaldama;
 taustklipp: polster-kast;
 ääris: 10 pikslit must must;
 laius: 300 pikslit;
 kõrgus: 250 pikslit;
 polster: 50 px;
}

Allpool toodud tulemustes näete, et nüüd on piltide osa, mis tuleb polsterduskasti, nähtav ka seetõttu, et oleme taustalõike tagasi polsterduskasti seadnud.

Nüüd näeme ka pildi osa, mis asub polsterduskarbis

Nüüd veendugem, et meie div-i taustpilt algab äärekastist ja selleks peame andma meie div-le taustboksi päritolu. Kuid kõigepealt suurendage piiri erinevust märgates piiri.

div {
 taust: # 666 URL ('https://bit.ly/2gzkSPX') ei korda;
 tausta suurus: sisaldama;
 taust-päritolu: piirikast;
 taustklipp: polster-kast;
 ääris: 20 pikslit must must; / * Äärise laius on nüüd 20 pikslit * /
 laius: 300 pikslit;
 kõrgus: 250 pikslit;
 polster: 50 px;
}

Nagu näete allpool oleval pildil, kuna taustpilt algab nüüd piirikastist, katab seetõttu väikese osa pildist must ääris, teisisõnu osa pildist on musta piiri taga.

Nüüd algab pilt piirdekastist

Tõestamaks nüüd oma seisukohta, et pilt algab piirkarbist ja sellepärast on väike osa kujutist musta piiri taga, anname äärisele teatud läbipaistmatuse, et see saaks tuhmuda ja näeksime seda osa pildist, mis on piiri taga.

div {
 taust: # 666 URL ('https://bit.ly/2gzkSPX') ei korda;
 tausta suurus: sisaldama;
 taust-päritolu: piirikast;
 taustklipp: polster-kast;
 ääris: 20 px tahke rgba (0,0,0,0,5); / * kasutades rgba () * /
 laius: 300 pikslit;
 kõrgus: 250 pikslit;
 polster: 50 px;
}
Siin näete pilti hääbuva piiri taga

Siin, nüüd, näete nüüd pildi osa, mis asub piiri taga ja see tõestab ka minu seisukohta, et nüüd algab pilt piirkarbist, kuna seadsime taustpäringu piiriks.

Nüüd, kui teate erinevust tausta päritolu ja taustklipi vahel ning teate ka CSS-i kasti mudeli kohta, on aeg teil minna ja ehitada sellega hämmastavaid asju. #Goodluck

Kui unustasite minu eelmise veebi juurdepääsetavust käsitleva artikli, siis siin on link sellele, ärge unustage seda lugeda. KLIKI SIIA