Modelul CSS Box explicat cu exemple

Dacă intenționați să creați un aspect de pagină web minunat, va trebui să aflați despre margini, margini, umplutură și conținut. Fiecare element din designul web, indiferent dacă este o imagine sau un text, folosește o casetă cu aceste proprietăți. Puteți construi cu ușurință machete complexe jucându-vă cu modelul cutiei. În acest articol, vom diseca modelul CSS Box și vă vom arăta cum să utilizați aceste proprietăți cu exemple practice.

Ce este modelul CSS Box?

Modelul de cutie CSS este un standard creat de Consorțiul World Wide Web. Descrie toate elementele dintr-un document HTML ca niște cutii dreptunghiulare cu propriile dimensiuni. Aceste casete conțin o zonă de conținut și zone opționale de margine, margine și zone de umplere. Deci, să explorăm părțile unei casete CSS.

Să descoperim cele patru straturi ale modelului de casetă CSS.

Primul strat: conținut

Zona de conținut conține conținutul principal al elementului care ar putea fi o imagine, un text sau orice formă de conținut media. Puteți modifica dimensiunile elementelor la nivel de bloc folosind

înălţime și lăţime proprietăți.

Al doilea strat: căptușeală

Împletirea este spațiul dintre caseta de conținut și caseta de margine a acesteia. Deși se află în jurul conținutului dvs. ca spațiu alb, puteți utiliza o culoare de fundal pentru a vizualiza diferența. Puteți aplica căptușeală, umplutura-dreapta, umplutură de fund, și umplutură-stânga proprietăți pentru a modifica spațiul.

Al treilea strat: Border

Bordura înfășoară conținutul și zona de umplere. Puteți redimensiona și stiliza marginea folosind lățimea graniței, în stil de frontieră, și culoare de margine proprietăți.

Al patrulea strat: Marja

Ultimul strat al modelului cutiei este utilizat pe scară largă pentru a genera spațiu între elemente. Marja înfășoară conținutul, umplutura și zona chenarului. Poți să folosești marginea de sus,marginea-dreapta, marginea-jos, și marginea-stânga proprietăți. De asemenea, puteți da proprietății marginii o valoare negativă sau auto pentru a realiza câteva tehnici minunate de plasare.

Configurare proiect pentru modelul CSS Box

Să construim un mini proiect pentru a demonstra modelul de cutie de bază cu o cutie de conținut și proprietăți de umplere, margine și margine. Puteți alege text, imagine sau conținut media. Vom începe prin a ne asigura că este structurat corespunzător.

Structură cu HTML

Ieșire:

Puteți utiliza funcții încorporate ale browserului, cum ar fi Instrumente pentru dezvoltatori Chrome, pentru a vedea ce se întâmplă. Folosim două imagini de la Unsplash. Pentru simplitate, vom ascunde imaginea smartphone-ului folosind display: none; până vom avea nevoie de el mai târziu.

Stilizare folosind CSS

/*************************
STILIZAREA DE BAZĂ
*************************/
* {
marja: 0px;
umplutură: 0px;
}
corp {
display: flex;
direcție flexibilă: rând;
} 
.display {
display: none! important;
}

Acum, să stilizăm caseta noastră de conținut. Mai întâi, vom seta înălţime și lăţime a imaginii. De asemenea, acordarea unei culori de fundal ajută la o vizualizare mai bună. Deci hai sa o facem.

/*************************
CUTIE DE CONȚINUT
*************************/
.content-box {
display: flex;
direcție flexibilă: rând;
justify-content: centru;
align-items: centru;
/ * Stilizarea casetei de conținut folosind înălțimea și lățimea proprietăților * /
culoare de fundal: #fdf;
înălțime: 20em;
lățime: 30em;
}

Oferiți spațiu de conținut pentru a respira cu căptușeală

Puteți fie să setați căptușeală, umplutura-dreapta, umplutură de fund, și umplutură-stânga proprietăți individual sau utilizați stenograma. Încercați să utilizați stenograma, dacă este posibil, deoarece vă poate economisi ceva timp. Să vedem cum funcționează umplutura.

 /*************************
PADDING
*************************/
/ * Aplicarea căptușelii * /
căptușeală: 5em;
umplutura-dreapta: 2em;
fund de umplutură: 8em;
umplutură-stânga: 2em;
/ * Stenografie de umplere * /
/ * sus / dreapta / jos / stânga * /
umplutură: 5em 2em 8em 2em;
/ * sus / orizontal / jos * /
umplutură: 5em 2em 8em;

Ieșire:

Desenați linii în jurul căptușirii folosind chenar

În timp ce aplicați proprietatea de frontieră, asigurați-vă că utilizați fișierul culoare de margine proprietate pentru a da chenarului o culoare distinctă față de fundal. Puteți selecta în stil de frontieră fie individual, fie dintr-o dată, folosind proprietatea de stenogramă. Același lucru este valabil și pentru lățimea graniței proprietate.

De asemenea, puteți seta frontieră-rază pentru a da cutiei colțuri rotunjite cu o rază în px, rem, em, sau procent.

 /*************************
FRONTIERĂ
*************************/
/ * Aplicarea proprietăților frontierei * /
/ * Setați culoarea chenarului * /
border-color: rgb (148, 234, 255);
/ * Selectați stilul chenarului * /
frontieră-top-style: solid;
border-right-style: punctat;
stil bord-fund: groove;
border-left-style: creastă;
/ * stenografie în stilul chenarului * /
/ * sus / dreapta / jos / stânga * /
în stilul chenarului: creastă solidă cu șanțuri;
/ * Setați lățimea chenarului * /
lățimea marginii-sus: 4em;
margine-dreapta-lățime: 2em;
margine-fund-lățime: 2em;
margine-lățime-stânga: 2em;
/ * stenogramă cu lățime de margine * /
/ * sus / dreapta / jos / stânga * /
lățimea chenarului: 4em 2em 2em 2em;
/ * sus / orizontal / jos * /
lățimea chenarului: 4em 2em 2em;
/ * stenograma proprietății la frontieră * /
/ * border: 4em solid rgb (148, 234, 255); */
/ * Setați raza chenarului * /
raza frontierei: 5em;
raza frontierei: 20%;

Ieșire:

Adăugați spațiu între cutii cu marjă

Puteți centra o cutie orizontal folosind marjă: 0 auto, cu condiția să aibă o lățime definită.

 /*************************
MARGIN
*************************/
/ * Aplicarea proprietăților de marjă * /
marginea-sus: 4em;
marginea-dreapta: 5em;
marginea-fund: 3em;
margine-stânga: 5em;
/ * Stenogramă marjă * /
/ * sus / dreapta / jos / stânga * /
margine: 4em 5em 3em 5em;
/ * sus / orizontal / jos * /
margine: 4em 5em 3em;
/ * Utilizarea marjei automate * /
margine: 3em auto;

Ieșire:

Puteți specifica proprietatea marginii utilizând una, două, trei sau patru valori. Valorile pot fi o lungime, un procent sau un cuvânt cheie de genul auto. Să înțelegem cum funcționează:

• Când specificați o singură valoare, înseamnă că toate cele patru părți vor avea aceeași marjă.
• Când specificați două valori, prima valoare înseamnă marginea-sus și marginea-jos în timp ce a doua valoare specifică marginea-dreapta și marginea-stânga.
• Când specificați trei valori, prima și ultima se aplică marginea-sus și marginea-jos respectiv. Valoarea de mijloc este pentru zona orizontală, adică marginea-dreapta și marginea-stânga.
• Când specificați toate cele patru valori, acestea se aplică în partea de sus, dreapta, jos și stânga (în ordine în sensul acelor de ceasornic).

Rețineți că puteți utiliza și aceste comenzi rapide pentru umplere și proprietăți de margine.

Vezi si: Foaia de trucuri Proprietăți esențiale CSS3

Ați folosit vreodată o marjă negativă? Pentru a-l vizualiza, să ștergem display: none pentru a afișa a doua noastră imagine, apoi setați o marjă negativă.

/ * .display {
display: none! important;
} */
.content-box {
display: flex;
direcție flexibilă: rând;
align-items: centru;
culoare de fundal: #fdf;
înălțime: 20em;
lățime: 30em;
umplutură: 5em 2em 8em;
în stilul chenarului: creastă solidă cu șanțuri;
lățimea chenarului: 4em 2em 2em;
raza frontierei: 20%;
/ * Utilizarea marjei negative * /
margine: 3em -20em 3em 5em;
}

Ieșire:

Modelul cutiei: realizarea unui site web Pixel Perfect

Modelul de cutie vă permite să definiți spațiul dintre elemente, să adăugați margini și să creați cu ușurință un aspect cu aspect complex. Puteți începe imediat pentru a crea un site web minunat. Între timp, puteți explora frontieră-cutie proprietate în detaliu și jucați-vă cu codul de mai sus.

Ar trebui să înțelegeți că există și alte metode de prezentare a conținutului în CSS. Acestea includ CSS Grid și CSS Flexbox. Odată ce vă simțiți confortabil cu modelul cutiei, ar trebui să continuați să aflați despre aceste alternative.

Tutorial CSS Flexbox: Noțiuni de bază

Poziționați perfect elementele HTML cu ajutorul CSS Flexbox.

Citiți în continuare

Despre autor