CSS dėžutės modelis paaiškintas pavyzdžiais.

Šiandien aš paaiškinsiu dėžutės modelį naudodamas CSS foninį klipą ir foninės kilmės nuosavybę. Kas yra fono klipo ir kilmės fono savybės? Kam jie naudojami ir koks skirtumas tarp jų?

Na, tai klausimas, pradedantis pradedantiesiems ir baigiant vidutiniu žiniatinklio kūrėjų lygiu. Kai kurie iš jų yra šiek tiek susipažinę su tuo, o kiti vis dar klausia, kur jie galėtų naudoti šias 2 savybes.

Na, prieš pradėdami suprasti šias 2 savybes, turite suprasti CSS dėžutės modelį. Taigi, pradėkime nuo to.

Pirmiausia sukurkite „div“ ir įdėkite „p“ žymą į jį taip,

šiek tiek turinio čia ...

ir tada suteikite jai tam tikrų stilių.

div {
 fonas: # 666;
 plotis: 300 taškų;
 aukštis: 250 taškų;
}
p {
 plotis: 200 taškų;
 fonas: raudonas;
}

Kaip matote, kad elementui „div“ nepateikėme jokių apmušalų ar kraštų, todėl „div“ elementui dar nėra padėklo ar apvado, o visa dėžutė laikoma turinio dėžute.

Kaip parodyta šiame paveikslėlyje žemiau.

Patikrinti save galite atidarę chromo kūrėjo įrankį

Dabar duokite „div“ šiek tiek 50 pikselių apmušalų iš viršaus, apačios, kairės, dešinės.

div {
 fonas: # 666;
 plotis: 300 taškų;
 aukštis: 250 taškų;
 paminkštinimas: 50px; // paminkštinimas iš viršaus, apačios, kairės, dešinės
}

Dabar turime 50 pikselių apmušalų dėžę, o turinio dėžutė yra padėklo dėžutės viduje, kaip parodyta šiame paveikslėlyje žemiau.

Pagaliau turime 50 pikselių pakavimo dėžę

Dabar pašalinkime „p“ elemento plotį, kad jis išsiplėttų iki viso turinio laukelio pločio.

p {
 fonas: raudonas;
}

Rezultatą galite pamatyti paveikslėlyje žemiau.

„P“ elementas išplečiamas, kad būtų naudojamas visas turinio laukelio plotis

Tarkime, kad jūs pridedate fono paveikslėlį prie „div“ ir nustatote jo fono dydį į „sudėtį“, kad jis būtų pakoreguojamas jo dydis dėžutės viduje, taip pat suteikiate šiek tiek rėmelio, nes be sienos nėra rėmelio.

div {
 fonas: # 666 URL ('https://bit.ly/2gzkSPX') nekartoti;
 fono dydis: yra;
 kraštinė: 10 pikselių vientisa juoda;
 plotis: 300 taškų;
 aukštis: 250 taškų;
 paminkštinimas: 50px;
}

Tada jis atrodys taip, kaip parodyta paveikslėlyje žemiau.

Taip pat galite patikrinti apsilankę chromo kūrimo įrankyje ir užveskite pelės žymeklį ant dėžutės modelio, kaip parodyta paveikslėlyje

Pagal numatytuosius nustatymus „div“ foninė kilmė yra nustatyta į „padding-box“, tai reiškia, kad vaizdas prasidės nuo apvado, o taip pat bus matomas turinio dėžutėje, nes turinio dėžutė yra užpildymo dėžutės viduje.

fono kilmė: polsterio dėžutė; /* Numatytoji reikšmė */

Tarkime, kad norime, kad vaizdas prasidėtų nuo užpildymo dėžutės, bet norime atskleisti tik tą paveikslėlio dalį, kuri yra turinio dėžutėje, tada turime nustatyti div foninį klipą turinio laukelyje.

div {
 fonas: # 666 URL ('https://bit.ly/2gzkSPX') nekartoti;
 fono dydis: yra;
 fono klipas: turinio dėžutė;
 kraštinė: 10 pikselių vientisa juoda;
 plotis: 300 taškų;
 aukštis: 250 taškų;
 paminkštinimas: 50px;
}

Žemiau galite pamatyti paveikslėlio rezultatus, kad matoma tik ta vaizdo dalis, kuri yra turinio laukelyje, tačiau vaizdas prasideda nuo užpildymo dėžutės, nes tai yra numatytoji „background-orgin“ vertė.

Kaip matote, kad matoma tik ta paveikslėlio dalis, kuri yra turinio laukelyje, o likusi dalis yra paslėpta

Taip pat atskleiskime fono paveikslėlio dalį, esančią padėklo dėžutėje, nes mums reikia grąžinti div foninį paveikslėlį atgal į polsterio dėžutę, kuri buvo numatytoji reikšmė prieš ją pakeisdami.

div {
 fonas: # 666 URL ('https://bit.ly/2gzkSPX') nekartoti;
 fono dydis: yra;
 fono klipas: polsterio dėžutė;
 kraštinė: 10 pikselių vientisa juoda;
 plotis: 300 taškų;
 aukštis: 250 taškų;
 paminkštinimas: 50px;
}

Žemiau pateiktuose rezultatuose galite pamatyti, kad dabar vaizdo dalis, esanti padėklo dėžutėje, taip pat matoma, nes fono įrašą nustatėme atgal į polsterio dėžutę.

Dabar mes taip pat galime pamatyti vaizdo dalį, esančią padėklo dėžutėje

Dabar įsitikinkime, kad mūsų div foninis vaizdas prasideda nuo apvado dėžutės, ir tam mes turime suteikti „div“ apvado dėžutės foninę kilmę. Bet pirmiausia padidinkime sienos dydį, kad pastebėtumėte skirtumą.

div {
 fonas: # 666 URL ('https://bit.ly/2gzkSPX') nekartoti;
 fono dydis: yra;
 fono kilmė: pasienio dėžutė;
 fono klipas: polsterio dėžutė;
 kraštinė: 20 pikselių vientisa juoda; / * Sienos plotis dabar yra 20 pikselių * /
 plotis: 300 taškų;
 aukštis: 250 taškų;
 paminkštinimas: 50px;
}

Kaip matote žemiau esančiame paveikslėlyje, todėl, kad fono vaizdas dabar prasideda nuo apvado, todėl nedidelę vaizdo dalį uždengia juoda rėmelis, kitaip tariant, dalis nuotraukos yra už juodos rėmelis.

Dabar vaizdas prasideda nuo apvado

Dabar norėčiau įrodyti, kad vaizdas prasideda nuo apvado ir todėl nedidelė paveikslėlio dalis yra už juodos spalvos rėmelio, suteiksime kraštui tam tikrą neskaidrumą, kad jis galėtų išnykti ir mes matome tą vaizdo dalį, kuri yra už sienos.

div {
 fonas: # 666 URL ('https://bit.ly/2gzkSPX') nekartoti;
 fono dydis: yra;
 fono kilmė: pasienio dėžutė;
 fono klipas: polsterio dėžutė;
 kraštas: 20 taškų kietas rgba (0,0,0,0,5); / * naudojant rgba () * /
 plotis: 300 taškų;
 aukštis: 250 taškų;
 paminkštinimas: 50px;
}
Čia galite pamatyti vaizdą už išblukusios sienos

Dabar jūs galite pamatyti vaizdo dalį, esančią už sienos, ir tai taip pat patvirtina mano mintį, kad dabar vaizdas prasideda nuo apvado dėžutės, nes fono kilmę nustatome prie apvado.

Dabar, kai žinote skirtumą tarp foninės kilmės ir foninio klipo, taip pat žinote apie CSS dėžutės modelį, atėjo laikas jums sukurti ir sukurti nuostabų dalyką. #Guoklis

Jei praleidote mano ankstesnį straipsnį apie interneto prieinamumą, čia yra nuoroda į jį, nepamirškite jo perskaityti. PASPAUSKITE ČIA