CSS a explicat modelul cutiei cu exemple.

Astăzi voi explica modelul de casetă folosind funcții de fundal CSS și fundal-origine. Care sunt caracteristicile clipului și fundalului de fundal? De ce sunt utilizate și diferența dintre fiecare dintre ele?

Ei bine, aceasta este o întrebare care trece de la minți de pornire la dezvoltatori web medii. Unii dintre ei sunt oarecum familiarizați cu acest lucru, iar alții se întreabă unde pot fi utilizate aceste 2 caracteristici.

Ei bine, înainte de a înțelege aceste 2 caracteristici, trebuie să înțelegeți modelul de casă CSS. Deci, să începem cu asta.

Mai întâi creați o div și așezați eticheta "p" în interiorul acesteia,

Iată ceva conținut ...

și apoi să-i oferim câteva stiluri.

div {fundal: # 666; latime: 300px; inaltime: 250px; } p {latime: 200px; fundal: roșu; }

Aparent, nu am pus nicio umplutură sau limite pe elementul div, deci elementul div nu conține încă cutii sau câmpuri, iar întreaga casetă este o casetă de conținut.

După cum se arată în imaginea de mai jos.

Vă puteți deschide prin deschiderea software-ului Chrome

Acum dați div-ului un spațiu de 50px de sus, jos, stânga, dreapta.

div {fundal: # 666; latime: 300px; inaltime: 250px; umplere: 50px; // completați partea de sus, jos, stânga, dreapta}

Acum obținem un câmp de umplere de 50px și în caseta de conținut așa cum se arată în imaginea de mai jos.

Acum avem în sfârșit o cutie de 50px

Acum eliminați lățimea din elementul "p", astfel încât să fie luată întreaga lățime a casetei de conținut.

p {fundal: roșu; }

Puteți vedea rezultatul în imaginea de mai jos.

Elementul „P” se extinde pentru a obține lățimea completă a componentei

Acum, să zicem că adăugați un tapet la „div” și setați tapetul „înăuntru” pentru a încadra dimensiunea acestuia în casetă, și îi dați și un chenar, deoarece nu există graniță.

div {background: # 666 url („https://bit.ly/2gzkSPX”) nu se repetă; fundal-size: contine; margine: 10px negru solid; latime: 300px; inaltime: 250px; umplere: 50px; }

Acesta va arăta ca în imaginea de mai jos.

Puteți verifica acest lucru accesând producătorul de software și făcând clic pe modelul casetei, așa cum se arată în imagine

În mod implicit, originea div este încorporată în caseta de umplere, imaginea începe de la graniță și apare în caseta de conținut, deoarece caseta de conținut se află în câmpul de umplere.

fundal: cutie de umplere; / * valoarea implicită * /

De exemplu, vrem să începem cu caseta de completare a imaginii, dar dorim doar să dezvăluim partea din imagine în caseta de conținut, apoi să setăm tapetul div din caseta de conținut.

div {background: # 666 url („https://bit.ly/2gzkSPX”) nu se repetă; fundal-size: contine; background-clip: content-box; margine: 10px negru solid; latime: 300px; inaltime: 250px; umplere: 50px; }

Puteți vedea rezultatele din imaginea de mai jos, deoarece doar o porțiune a imaginii din caseta de conținut este vizibilă, dar imaginea începe cu caseta de umplere, deoarece „box-orgin” este implicită.

Aparent, numai partea din imagine din caseta de conținut este vizibilă, iar restul este ascuns

Acum să deschidem partea în care imaginea de fundal intră în padd-box, pentru asta trebuie să returnăm tapetul div la caseta padd-box, care era valoarea implicită înainte de a o schimba.

div {background: # 666 url („https://bit.ly/2gzkSPX”) nu se repetă; fundal-size: contine; clema de fundal: cutie de umplere; margine: 10px negru solid; latime: 300px; inaltime: 250px; umplere: 50px; }

După cum puteți vedea din rezultatele de mai jos, acum vedem și partea din imagine care intră în cutia mantiei, întrucât am așezat clipul de fundal în cutia de padd.

Acum putem vedea și partea din imagine în caseta de imagine

Acum, să ne asigurăm că tapetul nostru div începe cu caseta de frontieră și, pentru asta, trebuie să oferim fundalului „div” originea căsuței de frontieră. În primul rând, să creștem dimensiunea graniței pentru a vedea diferența.

div {background: # 666 url („https://bit.ly/2gzkSPX”) nu se repetă; fundal-size: contine; originea de fundal: caseta de frontieră; clema de fundal: cutie de umplere; bordură: negru solid de 20px; / * Latime acum 20px * / Latime: 300px; inaltime: 250px; umplere: 50px; }

După cum puteți vedea în imaginea de mai jos, deoarece imaginile de fundal încep acum din zona de graniță, o porțiune mică a imaginii este acoperită cu chenar negru, cu alte cuvinte o porțiune a imaginii se află în spatele marginii negre.

Acum poza începe cu caseta de selectare

Acum, pentru a demonstra punctul meu de vedere că imaginea începe cu o casetă de bord și, prin urmare, o porțiune mică a imaginii se află în spatele marginii negre, haideți să facem marginea un pic neclară, astfel încât să se estompeze și să putem vedea ce parte a imaginii. dincolo de graniță.

div {background: # 666 url („https://bit.ly/2gzkSPX”) nu se repetă; fundal-size: contine; originea de fundal: caseta de frontieră; clema de fundal: cutie de umplere; graniță: 20px solid rgba (0,0,0,0,5); / * latime folosind rgba () * /: 300px; inaltime: 250px; umplere: 50px; }
Aici puteți vedea imaginea din spatele marginii slabe

Acum puteți vedea partea din imagine din spatele frontierei, iar acest lucru îmi dovedește ideea că imaginea începe de la graniță, deoarece setăm fundalul de fundal pe fereastra de frontieră.

Acum, că ai aflat diferența dintre fundal și clip art și, de asemenea, știi despre modelul de cutii CSS, este timpul să ajungi acolo și să creezi ceva minunat. #Goodluck

Dacă ați ratat articolul meu anterior despre accesul la Internet, iată linkul, așa că nu uitați să îl citiți. CLICK AICI