CSS kassalíkan útskýrt með dæmum.

Í dag ætla ég að útskýra kassamódelið með CSS bakgrunnsmagni og eignum bakgrunnsuppruna. Hvað eru eiginleikar bakgrunnsmynda og bakgrunnsuppruna? Til hvers eru þau notuð og munurinn á hverju þeirra?

Jæja, þetta er spurning sem rennur í gegnum huga byrjenda til millistigs vefhönnuða. Sumir þeirra þekkja nokkuð og aðrir velta því enn fyrir sér hvar þeir geta notað þessa 2 eiginleika.

Jæja, áður en þú skilur þessa tvo eiginleika þarftu að skilja CSS kassalíkanið. Svo skulum byrja á því.

Búðu fyrst til „div“ og settu „p“ merki inni í því eins og þetta,

eitthvað innihald hérna…

og gefðu því nokkra stíl.

Eins og þú sérð að við höfum ekki gefið „div“ frumefni neitt bólstrun eða landamæri, þá hefur „div“ frumefni enga padding-box eða border-box og allur kassinn er talinn innihaldskassi.

Eins og sést á þessari mynd hér að neðan.

Þú getur athugað sjálfan þig með því að opna króm verktaki

Gefðu „div“ smávörn á 50px frá toppi, neðri, vinstri, hægri.

div {
 bakgrunnur: # 666;
 breidd: 300px;
 hæð: 250px;
 padding: 50px; // bólstrun frá toppi, neðri, vinstri, hægri
}

Nú höfum við padding-kassa af 50px & content-box er inni í padding-box eins og sýnt er á þessari mynd hér að neðan.

Nú höfum við loksins padding kassa af 50px

Nú skulum við fjarlægja breiddina úr „p“ frumefninu svo hún stækkar til að taka alla breidd innihaldskassans.

p {
 bakgrunnur: rauður;
}

Þú getur séð niðurstöðuna í mynd hér að neðan.

'P' þátturinn stækkar til að taka alla breiddina á innihaldskassanum

Nú skulum við segja að þú bætir bakgrunnsmynd við „div“ og stillir bakgrunnsstærðina á „að innihalda“ til að láta hana laga stærðina inni í reitnum og þú gefur henni líka einhverja landamæri því án landamæra er enginn jaðarbox.

div {
 bakgrunnur: # 666 url ('https://bit.ly/2gzkSPX') engin endurtekning;
 bakgrunnsstærð: innihalda;
 landamæri: 10px solid svartur;
 breidd: 300px;
 hæð: 250px;
 padding: 50px;
}

Þá mun það líta svona út eins og sést á mynd hér að neðan.

Þú getur athugað það líka með því að fara í króm verktaki og sveima yfir kassamódel eins og sýnt er á mynd

Sjálfgefið er að uppruna div er stilltur á padding-box og það þýðir að myndin byrjar frá border-box og verður einnig sýnileg í content-box þar sem content-box er inni í padding-box.

bakgrunnur-uppruni: padding-kassi; /* sjálfgefið gildi */

Við skulum segja að við viljum að mynd byrji frá padding-box en við viljum aðeins afhjúpa þann hluta myndarinnar sem er í innihaldskassanum, þá verðum við að stilla bakgrunnsbút div's á content-box.

div {
 bakgrunnur: # 666 url ('https://bit.ly/2gzkSPX') engin endurtekning;
 bakgrunnsstærð: innihalda;
 bakgrunnur-bút: innihaldskassi;
 landamæri: 10px solid svartur;
 breidd: 300px;
 hæð: 250px;
 padding: 50px;
}

Þú getur séð niðurstöðurnar á myndinni hér að neðan að aðeins hluti myndarinnar sem er í innihaldskassanum er sýnilegur en myndin er að byrja frá padding kassanum því það er sjálfgefið gildi „bakgrunnur-orgin“.

Eins og þú sérð að aðeins hluti myndarinnar er sýnilegur sem er í innihaldskassanum og hvíldin er falin

Nú skulum við einnig afhjúpa þann hluta bakgrunnsmyndarinnar sem kemur inn í padding-kassann, til þess þurfum við að setja bakgrunnsbút div aftur í padding-boxið sem var sjálfgefið gildi áður en við breyttum honum.

div {
 bakgrunnur: # 666 url ('https://bit.ly/2gzkSPX') engin endurtekning;
 bakgrunnsstærð: innihalda;
 bakgrunnur-bút: padding-kassi;
 landamæri: 10px solid svartur;
 breidd: 300px;
 hæð: 250px;
 padding: 50px;
}

Þú getur séð í niðurstöðunum hér að neðan að nú er hluti myndarinnar sem kemur í padding-kassanum einnig sýnilegur vegna þess að við höfum sett bakgrunnsbút aftur í padding-box.

Núna getum við líka séð þann hluta myndarinnar sem er í padding kassanum

Nú skulum við ganga úr skugga um að bakgrunnsmynd div okkar byrjar frá landamærum og fyrir það þurfum við að gefa „div“ okkar bakgrunns uppruna landamerkjakassans. En fyrst skulum við auka stærð landamæranna til að taka eftir mismuninum.

div {
 bakgrunnur: # 666 url ('https://bit.ly/2gzkSPX') engin endurtekning;
 bakgrunnsstærð: innihalda;
 bakgrunnur-uppruni: landamerkjakassi;
 bakgrunnur-bút: padding-kassi;
 landamæri: 20px solid svartur; / * Brún jaðar er 20px núna * /
 breidd: 300px;
 hæð: 250px;
 padding: 50px;
}

Eins og þú sérð á myndinni hér að neðan að vegna þess að bakgrunnsmynd byrjar nú frá landamærum og því er lítill hluti myndar hulinn svörtum brún, með öðrum orðum, hluti myndarinnar er á bak við svarta landamærin.

Núna byrjar myndin frá landamærum

Nú til að sanna stig mitt að myndin sé að byrja frá landamærum og þess vegna er lítill hluti myndarinnar á bak við svarta landamærin, við skulum gefa landamærum ógagnsæi svo að hún geti dofnað og við sjáum þann hluta myndarinnar sem er á bak við landamærin.

div {
 bakgrunnur: # 666 url ('https://bit.ly/2gzkSPX') engin endurtekning;
 bakgrunnsstærð: innihalda;
 bakgrunnur-uppruni: landamerkjakassi;
 bakgrunnur-bút: padding-kassi;
 landamæri: 20px solid rgba (0,0,0,0,5); / * með rgba () * /
 breidd: 300px;
 hæð: 250px;
 padding: 50px;
}
Hérna er hægt að sjá myndina á bakvið hverfa landamærin

Hérna ferðu, þú getur nú séð þann hluta myndarinnar sem er á bak við landamærin og það sannar líka mitt atriði að nú er myndin að byrja frá landamerkjakassanum vegna þess að við setjum bakgrunnsuppruna á landamerkjakassann.

Nú þegar þú veist muninn á bakgrunn-uppruna og bakgrunn-bút og þú veist líka um CSS kassamódel, er kominn tími til að þú farir að smíða ótrúlegt efni með því. #Goodluck

Ef þú misstir af fyrri grein minni um aðgengi að vefnum, þá er hér krækjan, ekki gleyma að lesa hana. ÝTTU HÉR