Model CSS kutije objašnjen primjerima

Ako planirate izgraditi sjajan izgled web stranice, morat ćete znati o marginama, obrubima, ulošcima i sadržaju. Svaki element u web dizajnu, bilo da se radi o slici ili tekstu, koristi okvir s tim svojstvima. Možete jednostavno izgraditi složene izglede igrajući se s modelom kutije. U ovom ćemo članku raščlaniti CSS Box model i pokazati vam kako koristiti ta svojstva s praktičnim primjerima.

Što je CSS Box model?

Model CSS kutije standard je koji je stvorio World Wide Web Consortium. Opisuje sve elemente u HTML dokumentu kao pravokutne kutije s vlastitim dimenzijama. Ovi okviri sadrže područje sadržaja i izborna područja okolnih margina, obruba i padova. Dakle, istražimo dijelove CSS kutije.

Otkrijmo četiri sloja modela CSS kutije.

Prvi sloj: Sadržaj

Područje sadržaja sadrži glavni sadržaj elementa koji može biti slika, tekst ili bilo koji oblik medijskog sadržaja. Dimenzije elemenata na razini bloka možete izmijeniti pomoću visina i širina Svojstva.

Drugi sloj: Podstava

Padding je prostor između okvira sa sadržajem i okvira s rubom. Iako se nalazi oko vašeg sadržaja kao prazan prostor, možete upotrijebiti boju pozadine za vizualizaciju razlike. Možete se prijaviti

padding-top, padding-right, padding-bottom, i padding-left svojstva za promjenu prostora.

Treći sloj: Granica

Obrub obuhvaća sadržaj i područje za umetanje. Možete promijeniti veličinu i oblikovati obrub pomoću širina obruba, granični stil, i bordura Svojstva.

Četvrti sloj: Margina

Posljednji sloj modela kutije široko se koristi za stvaranje prostora između elemenata. Margina obuhvaća sadržaj, podstavu i rubno područje. Možeš koristiti margina-top,margina-desno, margina-dno, i margina-lijevo Svojstva. Svojstvu marže možete dati i negativnu vrijednost ili auto kako bi se postigle neke izvrsne tehnike postavljanja.

Postavljanje projekta za CSS Box model

Izgradimo mini projekt koji će demonstrirati osnovni model okvira s okvirom za sadržaj i ispunama, obrubima i marginama. Možete koristiti tekstualni, slikovni ili medijski sadržaj. Za početak ćemo provjeriti je li pravilno strukturirana.

Struktura s HTML -om

Izlaz:

Možete koristiti ugrađene značajke preglednika, poput Alati za razvojne programere Chrome, da vidim što se događa. Koristimo dvije slike iz programa Unsplash. Radi jednostavnosti, sakriti ćemo sliku pametnog telefona pomoću prikaz: nema; dok nam kasnije ne zatreba.

Stiliziranje pomoću CSS -a

/*************************
OSNOVNI STILING
*************************/
* {
margina: 0px;
padding: 0px;
}
tijelo {
zaslon: savitljiv;
smjer savijanja: red;
} 
.prikaz {
prikaz: nema! važno;
}

Sada, oblikujmo okvir za sadržaj. Prvo ćemo postaviti visina i širina slike. Također, davanje boje pozadine pomaže u boljoj vizualizaciji. Dakle, učinimo to.

/*************************
KUTIJA ZA SADRŽAJ
*************************/
.content-box {
zaslon: savitljiv;
smjer savijanja: red;
justify-content: centar;
align-items: centar;
/ * Stiliziranje okvira sadržaja pomoću svojstava visine i širine */
boja pozadine: #fdf;
visina: 20em;
širina: 30em;
}

Dajte sadržaju prostora za disanje s podstavkom

Možete postaviti ili padding-top, padding-right, padding-bottom, i padding-left svojstva pojedinačno ili koristite stenografiju. Pokušajte koristiti stenografiju ako je moguće jer vam može uštedjeti vrijeme. Pogledajmo kako funkcionira padding.

 /*************************
PODLAGANJE
*************************/
/ * Primjena obloga */
padding-top: 5em;
padding-right: 2em;
padding-bottom: 8em;
padding-left: 2em;
/ * Stenografija za padding */
/ * gore/desno/dolje/lijevo */
obloge: 5em 2em 8em 2em;
/ * gore/vodoravno/dolje */
punjenje: 5em 2em 8em;

Izlaz:

Nacrtajte linije oko podloge pomoću obruba

Prilikom primjene graničnog svojstva provjerite koristite li bordura svojstvo da granici daje posebnu boju u odnosu na pozadinu. Možete odabrati granični stil bilo pojedinačno ili odjednom koristeći stenografsko svojstvo. Isto vrijedi i za širina obruba imovine.

Također možete postaviti granica-radijus dati kutiji zaobljene kutove s radijusom u px, rem, em, ili postotak.

 /*************************
GRANICA
*************************/
/ * Primjena svojstava obruba */
/ * Postavi boju obruba */
obrub u boji: rgb (148, 234, 255);
/ * Odaberite stil obruba */
obrubljeni top stil: čvrst;
obrubljeno desno: isprekidano;
obrub-donji stil: utor;
obrub ulijevo: greben;
/ * stenografija u graničnom stilu */
/ * gore/desno/dolje/lijevo */
obrubljeni stil: čvrsti isprekidani greben utora;
/ * Postavi širinu obruba */
rub-gornja širina: 4em;
border-right-width: 2em;
obod-dno-širina: 2em;
rub-lijevo-širina: 2em;
/* stenografija širine granice*/
/ * gore/desno/dolje/lijevo */
širina obruba: 4em 2em 2em 2em;
/ * gore/vodoravno/dolje */
širina obruba: 4em 2em 2em;
/ * granična oznaka granične imovine */
/* obrub: 4em čvrsti rgb (148, 234, 255); */
/ * Postavi rub-radijus */
granica-radijus: 5em;
granica-radijus: 20%;

Izlaz:

Dodajte razmak između okvira s marginom

Kutiju možete vodoravno centrirati pomoću marža: 0 auto, pod uvjetom da ima određenu širinu.

 /*************************
MARGINA
*************************/
/ * Primjena svojstava marže */
margina-top: 4em;
margina desno: 5em;
margin-bottom: 3em;
margina-lijevo: 5em;
/ * Stenografija marže */
/ * gore/desno/dolje/lijevo */
marža: 4em 5em 3em 5em;
/ * gore/vodoravno/dolje */
marža: 4em 5em 3em;
/ * Korištenje automatske margine */
marža: 3em auto;

Izlaz:

Svojstvo margine možete navesti koristeći jednu, dvije, tri ili četiri vrijednosti. Vrijednosti mogu biti duljina, postotak ili ključna riječ auto. Shvatimo kako to funkcionira:

• Kada navedete samo jednu vrijednost, to znači da će sve četiri strane imati istu marginu.
• Kada navedete dvije vrijednosti, prva vrijednost označava margina-top i margina-dno dok druga vrijednost određuje margina-desno i margina-lijevo.
• Kad navedete tri vrijednosti, prva i posljednja vrijede za margina-top i margina-dno odnosno. Srednja vrijednost je za vodoravno područje, tj. margina-desno i margina-lijevo.
• Kad navedete sve četiri vrijednosti, one se primjenjuju na gornju, desnu, donju i lijevu stranu (u smjeru kazaljke na satu).

Imajte na umu da ove prečace možete koristiti i za svojstva umetanja i obruba.

Vidi također: Važna lista svojstava osnovnih svojstava CSS3

Jeste li ikada koristili negativnu maržu? Za vizualizaciju izbrisajmo prikaz: nema za prikaz naše druge slike, zatim postavite negativnu marginu.

/* .prikaz {
prikaz: nema! važno;
} */
.content-box {
zaslon: savitljiv;
smjer savijanja: red;
align-items: centar;
boja pozadine: #fdf;
visina: 20em;
širina: 30em;
punjenje: 5em 2em 8em;
obrubljeni stil: čvrsti isprekidani greben utora;
širina obruba: 4em 2em 2em;
granica-radijus: 20%;
/ * Koristeći negativnu maržu */
marža: 3em -20em 3em 5em;
}

Izlaz:

The Box Model: Izrada Pixel savršene web stranice

Model s kutijom omogućuje vam definiranje prostora između elemenata, dodavanje obruba i jednostavno stvaranje složenog izgleda. Možete odmah započeti s izradom izvrsne web stranice. U međuvremenu možete istražiti border-box svojstvo u detalje i igrajte se s gornjim kodom.

Morate shvatiti da postoje i druge metode za postavljanje sadržaja u CSS. To uključuje CSS Grid i CSS Flexbox. Nakon što se upoznate s modelom kutije, trebali biste nastaviti učiti o ovim alternativama.

Vodič za CSS Flexbox: Osnove

Savršeno postavite svoje HTML elemente uz pomoć CSS Flexbox -a.

Pročitajte Dalje

O autoru