Boxový model CSS vysvetlený na príkladoch

Ak plánujete vytvoriť úžasné rozloženie webovej stránky, budete potrebovať informácie o okrajoch, okrajoch, polstrovaní a obsahu. Každý prvok vo webovom dizajne, či už je to obrázok alebo text, používa pole s týmito vlastnosťami. Komplexné rozloženia môžete ľahko vytvoriť hraním s boxovým modelom. V tomto článku rozoberieme model CSS Box a na praktických príkladoch vám ukážeme, ako tieto vlastnosti používať.

Čo je to model CSS Box?

CSS box model je štandard vytvorený spoločnosťou World Wide Web Consortium. Popisuje všetky prvky v dokumente HTML ako obdĺžnikové polia s vlastnými rozmermi. Tieto boxy obsahujú oblasť obsahu a voliteľné obklopujúce oblasti okraja, okraja a výplne. Pozrime sa teda na časti poľa CSS.

Poďme odhaliť štyri vrstvy modelu CSS boxu.

Prvá vrstva: obsah

Oblasť obsahu obsahuje hlavný obsah prvku, ktorým môže byť obrázok, text alebo akákoľvek forma mediálneho obsahu. Rozmery prvkov na úrovni bloku môžete upraviť pomocou výška a šírka vlastnosti.

Druhá vrstva: polstrovanie

Polstrovanie je priestor medzi rámčekom s obsahom a jeho okrajom. Napriek tomu, že je okolo vášho obsahu prázdny priestor, na zobrazenie rozdielu môžete použiť farbu pozadia. Môžete podať žiadosť polstrovanie, polstrovanie-pravé, polstrovanie-dnoa polstrovanie-vľavo vlastnosti na úpravu priestoru.

Tretia vrstva: Hranica

Okraj obklopuje obsah a oblasť výplne. Veľkosť a ohraničenie môžete zmeniť pomocou a šírka okraja, hraničnom štýlea farba okraja vlastnosti.

Štvrtá vrstva: Okraj

Posledná vrstva modelu krabice je široko používaná na generovanie priestoru medzi prvkami. Okraj obopína obsah, výplň a ohraničenie. Môžeš použiť margin-top,okraj-vpravo, okrajové dnoa okraj-vľavo vlastnosti. Okrajovej vlastnosti môžete dať aj zápornú hodnotu alebo auto dosiahnuť niektoré úžasné techniky umiestnenia.

Nastavenie projektu pre model CSS Box

Postavme malý projekt, ktorý demonštruje základný model boxu s obsahom boxu a vlastnosťami výplne, orámovania a okraja. Môžete ísť s textovým, obrázkovým alebo mediálnym obsahom. Začneme tým, že sa uistíme, že je správne štruktúrovaný.

Štruktúra s HTML

Výkon:

Môžete používať vstavané funkcie vášho prehliadača, ako napríklad Nástroje pre vývojárov prehliadača Chrome, aby ste videli, čo sa deje. Používame dva obrázky z Unsplash. Pre jednoduchosť skryjeme obrázok smartfónu pomocou displej: žiadny; kým to nebudeme potrebovať neskôr.

Styling pomocou CSS

/*************************
ZÁKLADNÝ STYLING
*************************/
* {
okraj: 0px;
čalúnenie: 0px;
}
telo {
displej: flex;
smer ohybu: riadok;
} 
.display {
displej: žiadny! dôležité;
}

Teraz si upravme obsahové pole. Najprv nastavíme výška a šírka obrazu. Poskytnutie farby pozadia tiež pomáha pri lepšej vizualizácii. Tak poďme na to.

/*************************
OBSAHOVÝ BOX
*************************/
.content-box {
displej: flex;
smer ohybu: riadok;
justify-content: center;
zarovnávacie položky: stred;
/ * Úprava obsahu poľa pomocou vlastností výšky a šírky */
farba pozadia: #fdf;
výška: 20em;
šírka: 30em;
}

Poskytnite obsahu priestor na dýchanie s vypchávkami

Môžete buď nastaviť polstrovanie, polstrovanie-pravé, polstrovanie-dnoa polstrovanie-vľavo vlastnosti jednotlivo alebo použite skratku. Ak je to možné, skúste použiť skratku, pretože vám to môže ušetriť čas. Pozrime sa, ako funguje polstrovanie.

 /*************************
VYPCHÁVKA
*************************/
/ * Použitie vypchávky */
vypchávka: 5em;
polstrovanie vpravo: 2em;
čalúnené dno: 8em;
polstrovanie vľavo: 2em;
/ * Polstrovaná skratka */
/ * hore/vpravo/dole/vľavo */
vypchávky: 5em 2em 8em 2em;
/ * hore/horizontálne/dole */
polstrovanie: 5em 2em 8em;

Výkon:

Nakreslite čiary okolo vypchávky pomocou ohraničenia

Pri použití vlastnosti border sa uistite, že používate farba okraja vlastnosť, ktorá dodá orámovaniu odlišnú farbu od pozadia. Môžete vybrať hraničnom štýle buď jednotlivo, alebo naraz pomocou skratkovej vlastnosti. To isté platí pre šírka okraja nehnuteľnosť.

Môžete tiež nastaviť polomer hranice aby krabica mala zaoblené rohy s polomerom v px, rem, em, alebo percent.

 /*************************
HRANICA
*************************/
/ * Použitie vlastností ohraničenia */
/ * Nastaviť farbu orámovania */
farba okraja: rgb (148, 234, 255);
/ * Vyberte štýl ohraničenia */
štýl border-top: pevný;
štýl pravého okraja: prerušované;
štýl spodného okraja: drážka;
štýl ohraničenia vľavo: hrebeň;
/ * skrátená skratka v štýle */
/ * hore/vpravo/dole/vľavo */
hraničný štýl: pevný prerušovaný hrebeň;
/ * Nastaviť šírku orámovania */
šírka horného okraja: 4em;
border-right-width: 2em;
šírka dolného okraja: 2em;
šírka-ohraničenie-vľavo: 2em;
/* skratka šírky okraja*/
/ * hore/vpravo/dole/vľavo */
šírka orámovania: 4em 2em 2em 2em;
/ * hore/horizontálne/dole */
šírka orámovania: 4em 2em 2em;
/ * hraničná vlastnosť skratka */
/* okraj: 4em pevný rgb (148, 234, 255); */
/ * Nastaviť polomer ohraničenia */
polomer hranice: 5em;
polomer hranice: 20%;

Výkon:

Pridajte priestor medzi škatule s okrajom

Krabicu môžete horizontálne vycentrovať pomocou okraj: 0 auto, za predpokladu, že má určitú šírku.

 /*************************
MARGIN
*************************/
/ * Použitie vlastností okraja */
margin-top: 4em;
okraj-vpravo: 5em;
okraj-dno: 3em;
okraj-vľavo: 5em;
/ * Skrátená marža */
/ * hore/vpravo/dole/vľavo */
marža: 4em 5em 3em 5em;
/ * hore/horizontálne/dole */
marža: 4em 5em 3em;
/ * Použitie automatického okraja */
okraj: 3em auto;

Výkon:

Vlastnosť okraja môžete určiť pomocou jednej, dvoch, troch alebo štyroch hodnôt. Hodnotami môžu byť dĺžka, percento alebo podobné kľúčové slovo auto. Poďme pochopiť, ako to funguje:

• Keď zadáte iba jednu hodnotu, znamená to, že všetky štyri strany budú mať rovnaký okraj.
• Keď zadáte dve hodnoty, prvá hodnota znamená margin-top a okrajové dno zatiaľ čo druhá hodnota špecifikuje okraj-vpravo a okraj-vľavo.
• Keď zadáte tri hodnoty, prvá a posledná sa použijú na margin-top a okrajové dno resp. Stredná hodnota je pre horizontálnu oblasť, tj. okraj-vpravo a okraj-vľavo.
• Keď zadáte všetky štyri hodnoty, budú sa vzťahovať na horný, pravý, dolný a ľavý (v smere hodinových ručičiek).

Tieto klávesové skratky môžete použiť aj pre vlastnosti výplne a orámovania.

Pozri tiež: Cheat Sheet The Essential CSS3 Properties

Použili ste niekedy zápornú maržu? Aby sme to videli, vymažeme displej: žiadny na zobrazenie nášho druhého obrázku, potom nastavte záporný okraj.

/* .display {
displej: žiadny! dôležité;
} */
.content-box {
displej: flex;
smer ohybu: riadok;
zarovnávacie položky: stred;
farba pozadia: #fdf;
výška: 20em;
šírka: 30em;
polstrovanie: 5em 2em 8em;
hraničný štýl: pevný prerušovaný hrebeň;
šírka orámovania: 4em 2em 2em;
polomer hranice: 20%;
/ * Použitie negatívnej marže */
marža: 3em -20em 3em 5em;
}

Výkon:

The Box Model: Make a Pixel Perfect website

Krabicový model vám umožňuje definovať priestor medzi prvkami, pridať okraje a jednoducho vytvoriť komplexne vyzerajúce rozloženie. Hneď môžete začať vytvárať úžasnú webovú stránku. Medzitým môžete preskúmať hraničný box podrobne prehrať nehnuteľnosť a pohrať sa s kódom vyššie.

Mali by ste pochopiť, že existujú aj iné metódy na rozvrhnutie obsahu v CSS. Patria sem CSS Grid a CSS Flexbox. Akonáhle vám boxový model bude vyhovovať, mali by ste sa aj naďalej učiť o týchto alternatívach.

Výukový program CSS Flexbox: Základy

Dokonale umiestnite svoje prvky HTML pomocou CSS Flexbox.

Čítajte ďalej

O autorovi