Model CSS Box vysvětlen na příkladech

Pokud plánujete vytvořit úžasné rozvržení webové stránky, budete potřebovat vědět o okrajích, okrajích, odsazení a obsahu. Každý prvek ve webovém designu, ať už je to obrázek nebo text, používá pole s těmito vlastnostmi. Složité rozvržení můžete snadno vytvářet hraním s krabicovým modelem. V tomto článku rozebereme model CSS Box a na praktických příkladech vám ukážeme, jak tyto vlastnosti používat.

Co je model CSS Box?

CSS box model je standard vytvořený World Wide Web Consortium. Popisuje všechny prvky v dokumentu HTML jako obdélníková pole s vlastními rozměry. Tato pole obsahují oblast obsahu a volitelně obklopující oblasti okraje, ohraničení a odsazení. Pojďme tedy prozkoumat části pole CSS.

Odhalíme čtyři vrstvy modelu CSS boxu.

První vrstva: obsah

Oblast obsahu obsahuje hlavní obsah prvku, kterým může být obrázek, text nebo jakákoli forma mediálního obsahu. Rozměry prvků na úrovni bloku můžete upravit pomocí výška a šířka vlastnosti.

Druhá vrstva: Polstrování

Padding je prostor mezi rámečkem obsahu a jeho rámečkem. Ačkoli je váš obsah obklopen prázdným prostorem, můžete k zobrazení rozdílu použít barvu pozadí. Můžete se přihlásit

polstrování, polstrování-pravé, polstrování-dno, a polstrování-vlevo vlastnosti pro úpravu prostoru.

Třetí vrstva: Hranice

Okraj obtéká obsah a oblast odsazení. Můžete změnit velikost a styl ohraničení pomocí šířka okraje, hraničním stylu, a barva okraje vlastnosti.

Čtvrtá vrstva: Okraj

Poslední vrstva modelu krabice je široce používána ke generování prostoru mezi prvky. Okraj obtéká obsah, odsazení a oblast ohraničení. Můžeš použít horní okraj,okraj-vpravo, okrajové dno, a okraj vlevo vlastnosti. Vlastnosti margin můžete také dát zápornou hodnotu nebo auto dosáhnout několika úžasných technik umístění.

Nastavení projektu pro model CSS Box

Pojďme postavit mini projekt, který předvede základní model boxu s obsahem boxu a vlastnostmi výplně, ohraničení a okraje. Můžete jít s textem, obrázkem nebo mediálním obsahem. Začneme tím, že se ujistíme, že je správně strukturován.

Struktura s HTML

Výstup:

Můžete používat vestavěné funkce vašeho prohlížeče, například Nástroje pro vývojáře Chrome, abych viděl, co se děje. Používáme dva obrázky z Unsplash. Pro zjednodušení skryjeme obrázek smartphonu pomocí displej: žádný; dokud to nebudeme potřebovat později.

Styling pomocí CSS

/*************************
ZÁKLADNÍ STYLING
*************************/
* {
okraj: 0px;
čalounění: 0px;
}
tělo {
displej: flex;
flex-direction: řada;
} 
.Zobrazit {
displej: žádný! důležité;
}

Nyní stylizujme naše obsahové pole. Nejprve nastavíme výška a šířka obrazu. Také barva pozadí pomáhá při lepší vizualizaci. Tak to udělejme.

/*************************
OBSAHOVÝ BOX
*************************/
.content-box {
displej: flex;
flex-direction: řada;
justify-content: center;
align-items: center;
/ * Styling pole obsahu pomocí vlastností výšky a šířky */
barva pozadí: #fdf;
výška: 20em;
šířka: 30em;
}

Poskytněte obsahu prostor k dýchání s polstrováním

Můžete buď nastavit polstrování, polstrování-pravé, polstrování-dno, a polstrování-vlevo vlastnosti jednotlivě nebo použijte zkratku. Pokud je to možné, zkuste použít zkratku, protože vám to může ušetřit čas. Pojďme se podívat, jak padding funguje.

 /*************************
PODLOŽKA
*************************/
/ * Použití polstrování */
polstrování: 5em;
polstrování vpravo: 2em;
polstrování-dole: 8em;
polstrování vlevo: 2em;
/ * Výplň zkratka */
/ * nahoře/vpravo/dole/vlevo */
polstrování: 5em 2em 8em 2em;
/ * nahoře/vodorovně/dole */
polstrování: 5em 2em 8em;

Výstup:

Nakreslete čáry kolem polstrování pomocí ohraničení

Při použití vlastnosti border se ujistěte, že používáte barva okraje vlastnost, která dodá ohraničení odlišnou barvu od pozadí. Můžete vybrat hraničním stylu buď jednotlivě, nebo najednou pomocí zkrácené vlastnosti. Totéž platí pro šířka okraje vlastnictví.

Můžete také nastavit poloměr hranice aby krabice měla zaoblené rohy s poloměrem v px, rem, em, nebo procento.

 /*************************
OKRAJ
*************************/
/ * Použití vlastností ohraničení */
/ * Nastavit barvu ohraničení */
barva ohraničení: rgb (148, 234, 255);
/ * Vyberte styl ohraničení */
styl ohraničení: pevný;
border-right-style: dashed;
styl spodního okraje: drážka;
styl hranice-vlevo: hřeben;
/ * zkratka ve stylu border */
/ * nahoře/vpravo/dole/vlevo */
styl ohraničení: pevný čárkovaný hřeben drážky;
/ * Nastavit šířku ohraničení */
border-top-width: 4em;
border-right-width: 2em;
šířka dolního okraje: 2em;
border-left-width: 2em;
/* zkratka šířky okraje*/
/ * nahoře/vpravo/dole/vlevo */
šířka okraje: 4em 2em 2em 2em;
/ * nahoře/vodorovně/dole */
šířka okraje: 4em 2em 2em;
/ * hraniční zkratka majetku */
/* ohraničení: 4em solid rgb (148, 234, 255); */
/ * Nastavit poloměr ohraničení */
poloměr ohraničení: 5em;
poloměr ohraničení: 20%;

Výstup:

Přidejte prostor mezi boxy s okrajem

Krabici můžete vycentrovat vodorovně pomocí okraj: 0 auto, za předpokladu, že má určitou šířku.

 /*************************
OKRAJ
*************************/
/ * Použití vlastností okrajů */
margin-top: 4em;
margin-right: 5em;
margin-bottom: 3em;
okraj vlevo: 5em;
/ * Zkratka marže */
/ * nahoře/vpravo/dole/vlevo */
marže: 4em 5em 3em 5em;
/ * nahoře/vodorovně/dole */
marže: 4em 5em 3em;
/ * Použití automatického okraje */
okraj: 3em auto;

Výstup:

Vlastnost margin můžete zadat pomocí jedné, dvou, tří nebo čtyř hodnot. Hodnoty mohou být délka, procento nebo podobné klíčové slovo auto. Pojďme pochopit, jak to funguje:

• Když zadáte pouze jednu hodnotu, znamená to, že všechny čtyři strany budou mít stejný okraj.
• Když zadáte dvě hodnoty, první hodnota znamená margin-top a okrajové dno zatímco druhá hodnota určuje okraj-vpravo a okraj vlevo.
• Když zadáte tři hodnoty, první a poslední se použijí na margin-top a okrajové dno resp. Střední hodnota je pro vodorovnou oblast, tj. okraj-vpravo a okraj vlevo.
• Když zadáte všechny čtyři hodnoty, použijí se nahoře, vpravo, dole a vlevo (ve směru hodinových ručiček).

Tyto zkratky můžete také použít pro vlastnosti odsazení a ohraničení.

Viz také: Cheat Sheet Essential CSS3 Properties

Použili jste někdy zápornou marži? Abychom si to mohli představit, vymažeme displej: žádný pro zobrazení našeho druhého obrázku, pak nastavte záporný okraj.

/* .Zobrazit {
displej: žádný! důležité;
} */
.content-box {
displej: flex;
flex-direction: řada;
align-items: center;
barva pozadí: #fdf;
výška: 20em;
šířka: 30em;
polstrování: 5em 2em 8em;
styl ohraničení: pevný čárkovaný hřeben drážky;
šířka okraje: 4em 2em 2em;
poloměr ohraničení: 20%;
/ * Použití záporné marže */
marže: 3em -20em 3em 5em;
}

Výstup:

The Box Model: Make a Pixel Perfect website

Box model umožňuje definovat prostor mezi prvky, přidávat ohraničení a snadno vytvářet komplexně vypadající rozvržení. Můžete hned začít vytvářet úžasný web. Mezitím můžete prozkoumat hraniční box nemovitost v detailu a pohrajte si s kódem výše.

Měli byste pochopit, že existují další metody pro rozvržení obsahu v CSS. Patří mezi ně CSS Grid a CSS Flexbox. Jakmile budete s krabicovým modelem spokojeni, měli byste se o těchto alternativách dále učit.

Výukový program CSS Flexbox: Základy

Dokonale umístěte své prvky HTML pomocí CSS Flexbox.

Číst dále

O autorovi