Model škatle CSS, razložen s primeri

Če nameravate ustvariti čudovito postavitev spletne strani, morate vedeti o robovih, obrobah, oblazinjenju in vsebini. Vsak element v spletnem oblikovanju, ne glede na to, ali je slika ali besedilo, uporablja polje s temi lastnostmi. Kompleksne postavitve lahko preprosto sestavite tako, da se igrate z modelom škatle. V tem članku bomo razčlenili model CSS Box in vam pokazali, kako te lastnosti uporabiti s praktičnimi primeri.

Kaj je model CSS Box?

Model škatle CSS je standard, ki ga je ustvaril Svetovni spletni konzorcij. Opisuje vse elemente v dokumentu HTML kot pravokotne škatle z lastnimi dimenzijami. Ta polja vsebujejo področje vsebine in izbirna območja robov, robov in oblazinjenja. Torej, raziščimo dele škatle CSS.

Odkrijmo štiri plasti modela škatle CSS.

Prva plast: Vsebina

Področje vsebine vsebuje glavno vsebino elementa, ki je lahko slika, besedilo ali katera koli oblika medijske vsebine. Dimenzije elementov na ravni bloka lahko spremenite s pomočjo višino in premer lastnosti.

Drugi sloj: oblazinjenje

Oblazinjenje je prostor med polje z vsebino in mejno polje. Čeprav se nahaja okoli vaše vsebine kot presledek, lahko uporabite barvo ozadja za vizualizacijo razlike. Lahko se prijavite oblazinjeni vrh, oblazinjenje-desno, oblazinjeno dno, in oblazinjenje-levo lastnosti za spreminjanje prostora.

Tretja plast: meja

Meja zavije vsebino in območje za oblazinjenje. Mejo lahko spremenite in oblikujete širina obrobe, mejni slog, in obrobna barva lastnosti.

Četrti sloj: rob

Zadnja plast modela škatle se pogosto uporablja za ustvarjanje prostora med elementi. Rob zavije vsebino, oblazinjenje in obrobje. Lahko uporabiš rob na vrhu,rob desno, rob-dno, in rob-levo lastnosti. Lastnosti marže lahko daste tudi negativno vrednost oz samodejno doseči nekaj čudovitih tehnik postavitve.

Nastavitev projekta za model škatle CSS

Zgradimo mini projekt za prikaz osnovnega modela škatle z vsebinskim okvirjem in lastnostmi oblazinjenja, obrobe in robov. Uporabite lahko besedilno, slikovno ali medijsko vsebino. Začeli bomo tako, da se prepričamo, da je pravilno strukturiran.

Struktura s HTML

Izhod:

Uporabite lahko vgrajene funkcije brskalnika, na primer Orodja za razvijalce Chrome, da vidim, kaj se dogaja. Uporabljamo dve sliki iz programa Unsplash. Zaradi poenostavitve bomo sliko pametnega telefona skrili z uporabo prikaz: brez; dokler ga kasneje ne potrebujemo.

Slog z uporabo CSS

/*************************
OSNOVNI STIL
*************************/
* {
rob: 0px;
oblazinjenje: 0px;
}
telo {
zaslon: flex;
upogibna smer: vrstica;
} 
.display {
prikaz: nič! pomembno;
}

Zdaj pa oblikujmo polje z vsebino. Najprej bomo nastavili višino in premer slike. Tudi barva ozadja pomaga pri boljši vizualizaciji. Torej, naredimo to.

/*************************
VSEBINA
*************************/
.content-box {
zaslon: flex;
upogibna smer: vrstica;
justify-content: center;
align-items: center;
/ * Oblikovanje polja vsebine z uporabo lastnosti višine in širine */
barva ozadja: #fdf;
višina: 20em;
širina: 30em;
}

Dajte vsebini prostor za dihanje z oblazinjenjem

Nastavite lahko bodisi oblazinjeni vrh, oblazinjenje-desno, oblazinjeno dno, in oblazinjenje-levo lastnosti posamično ali uporabite stenografijo. Če je mogoče, poskusite uporabiti okrajšavo, saj vam lahko prihrani nekaj časa. Poglejmo, kako deluje oblazinjenje.

 /*************************
PODLAGANJE
*************************/
/ * Uporaba oblazinjenja */
oblazinjenje: 5em;
oblazinjenje desno: 2em;
oblazinjeno dno: 8em;
oblazinjenje-levo: 2em;
/ * Oblazinjena stenografija */
/ * zgoraj/desno/spodaj/levo */
oblazinjenje: 5em 2em 8em 2em;
/ * zgoraj/vodoravno/spodaj */
oblazinjenje: 5em 2em 8em;

Izhod:

Narišite črte okoli oblazinjenja z obrobo

Med uporabo mejne lastnine se prepričajte, da uporabljate obrobna barva lastnost, ki daje obrobi ločeno barvo od ozadja. Izberete lahko mejni slog bodisi posamično bodisi naenkrat z uporabo lastništva stenografije. Enako velja za širina obrobe lastnine.

Nastavite lahko tudi meja-polmer dati škatli zaobljene vogale s polmerom px, rem, emali odstotek.

 /*************************
MEJA
*************************/
/ * Uporaba mejnih lastnosti */
/ * Nastavi barvo obrobe */
barva obrobe: rgb (148, 234, 255);
/ * Izberite slog obrobe */
obroba na vrhu: trdna;
obrobno desno: črtkano;
meja-dno: utor;
obroba levo: greben;
/ * okrajšava v slogu obrobe */
/ * zgoraj/desno/spodaj/levo */
robni slog: trden črtkani utor;
/ * Nastavi širino obrobe */
meja-vrh-širina: 4em;
rob-desna-širina: 2em;
meja-širina dna: 2em;
rob-levo-širina: 2em;
/* okrajšava širine obrobe*/
/ * zgoraj/desno/spodaj/levo */
širina obrobe: 4em 2em 2em 2em;
/ * zgoraj/vodoravno/spodaj */
širina obrobe: 4em 2em 2em;
/ * okrajšava mejne lastnine */
/* meja: 4em trdna rgb (148, 234, 255); */
/ * Nastavi mejo-polmer */
meja-polmer: 5em;
meja-polmer: 20%;

Izhod:

Dodajte prostor med polji z robom

Škatlo lahko vodoravno centrirate s pomočjo rob: 0 avto, pod pogojem, da ima določeno širino.

 /*************************
MARGIN
*************************/
/ * Uporaba lastnosti robov */
zgornja meja: 4em;
desni rob: 5em;
rob na dnu: 3em;
levi rob: 5em;
/ * Okrajšava marže */
/ * zgoraj/desno/spodaj/levo */
marža: 4em 5em 3em 5em;
/ * zgoraj/vodoravno/spodaj */
marža: 4em 5em 3em;
/ * Uporaba samodejnega roba */
rob: 3em avtomatsko;

Izhod:

Lastnost roba lahko podate z eno, dvema, tremi ali štirimi vrednostmi. Vrednosti so lahko dolžine, odstotka ali ključne besede samodejno. Poglejmo, kako deluje:

• Če določite samo eno vrednost, to pomeni, da bodo imele vse štiri strani enak rob.
• Ko določite dve vrednosti, prva vrednost pomeni rob na vrhu in rob-dno medtem ko druga vrednost določa rob desno in rob-levo.
• Ko določite tri vrednosti, veljata prva in zadnja za rob na vrhu in rob-dno oz. Srednja vrednost je za vodoravno območje, tj. rob desno in rob-levo.
• Ko določite vse štiri vrednosti, veljajo za zgornji, desni, spodnji in levi (v smeri urinega kazalca).

Upoštevajte, da lahko te bližnjice uporabite tudi za lastnosti oblazinjenja in obrobe.

Poglej tudi: Osnovni list lastnosti CSS3 Lastnosti

Ste kdaj uporabili negativno maržo? Za vizualizacijo izbrišimo zaslon: brez da prikažemo drugo sliko, nato nastavimo negativni rob.

/* .display {
prikaz: nič! pomembno;
} */
.content-box {
zaslon: flex;
upogibna smer: vrstica;
align-items: center;
barva ozadja: #fdf;
višina: 20em;
širina: 30em;
oblazinjenje: 5em 2em 8em;
robni slog: trden črtkani utor;
širina obrobe: 4em 2em 2em;
meja-polmer: 20%;
/ * Z uporabo negativnega roba */
marža: 3em -20em 3em 5em;
}

Izhod:

Model Box: Ustvarjanje popolne spletne strani Pixel

Model škatle vam omogoča, da določite prostor med elementi, dodate obrobe in preprosto sestavite zapleteno postavitev. Takoj lahko začnete ustvarjati čudovito spletno mesto. Medtem lahko raziščete robna škatla podrobno preučite lastnino in se poigrajte s zgornjo kodo.

Morate razumeti, da obstajajo druge metode za postavitev vsebine v CSS. Ti vključujejo CSS Grid in CSS Flexbox. Ko vam je model škatle všeč, bi morali še naprej spoznavati te možnosti.

CSS Flexbox Vadnica: Osnove

Popolnoma postavite svoje elemente HTML s pomočjo CSS Flexbox.

Preberite Naprej

O avtorju