CSS dėžės modelis paaiškinamas pavyzdžiais

Jei planuojate sukurti nuostabų tinklalapio išdėstymą, turėsite žinoti apie paraštes, kraštus, užpildymą ir turinį. Kiekvienas žiniatinklio dizaino elementas, nesvarbu, ar tai vaizdas, ar tekstas, naudoja langelį su šiomis savybėmis. Galite lengvai sukurti sudėtingus maketus žaisdami su dėžutės modeliu. Šiame straipsnyje mes išnagrinėsime CSS dėžutės modelį ir parodysime, kaip naudoti šias savybes su praktiniais pavyzdžiais.

Kas yra CSS dėžės modelis?

CSS dėžės modelis yra standartas, sukurtas Pasaulinio interneto konsorciumas. Jame aprašomi visi HTML dokumento elementai kaip stačiakampiai langeliai, turintys savo matmenis. Šiose dėžutėse yra turinio sritis ir pasirenkamos aplinkinės paraštės, kraštinės ir užpildymo sritys. Taigi, panagrinėkime CSS dėžutės dalis.

Atskleiskime keturis CSS dėžės modelio sluoksnius.

Pirmasis sluoksnis: turinys

Turinio srityje yra pagrindinis elemento turinys, kuris gali būti vaizdas, tekstas ar bet kokia medijos turinio forma. Bloko lygio elementų matmenis galite keisti naudodami aukščio ir pločio savybės.

Antrasis sluoksnis: paminkštinimas

Paminkštinimas yra tarpas tarp turinio dėžutės ir jos kraštinės. Nors jis yra tarp jūsų turinio kaip tarpas, skirtumui vizualizuoti galite naudoti fono spalvą. Galite kreiptis padding-top, paminkštinimas-dešinėje, paminkštinimas-apačia, ir paminkštinimas-kairėn savybes, kad pakeistumėte erdvę.

Trečias sluoksnis: siena

Apvadas apvynioja turinį ir paminkštinimo zoną. Galite pakeisti apvado dydį ir stilių naudodami ribos plotis, pasienio stiliaus, ir kraštinės spalva savybės.

Ketvirtas sluoksnis: paraštė

Paskutinis dėžutės modelio sluoksnis yra plačiai naudojamas erdvei tarp elementų generuoti. Paraštė apgaubia turinį, paminkštinimą ir kraštinę. Tu gali naudoti paraštė,paraštė-dešinė, paraštė-apačia, ir paraštė-kairė savybės. Taip pat maržos ypatybei galite suteikti neigiamą vertę arba automatinis kad pasiektumėte nuostabių išdėstymo būdų.

Projekto sąranka CSS dėžutės modeliui

Sukurkime mini projektą, kuris pademonstruotų pagrindinį dėžės modelį su turinio langeliu ir užpildymo, kraštinės ir paraštės savybėmis. Galite naudoti tekstą, vaizdą ar medijos turinį. Pradėsime nuo to, kad įsitikinsime, kad jis tinkamai suprojektuotas.

Struktūra su HTML

Išėjimas:

Galite naudoti integruotas naršyklės funkcijas, pvz „Chrome“ kūrėjo įrankiai, pamatyti, kas vyksta. Mes naudojame du „Unsplash“ vaizdus. Paprastumo dėlei paslėpsime išmaniojo telefono vaizdą naudodami ekranas: nėra; kol mums to prireiks vėliau.

Stilius naudojant CSS

/*************************
PAGRINDINIS STILIUS
*************************/
* {
paraštė: 0 taškų;
paminkštinimas: 0 taškų;
}
kūnas {
ekranas: lankstus;
lanksti kryptis: eilutė;
} 
.display {
ekranas: nėra! svarbu;
}

Dabar sukurkime turinio dėžutės stilių. Pirma, mes nustatysime aukščio ir pločio įvaizdžio. Be to, fono spalvos suteikimas padeda geriau vizualizuoti. Taigi, padarykime tai.

/*************************
TURINYS
*************************/
.content-box {
ekranas: lankstus;
lanksti kryptis: eilutė;
pagrįsti turinį: centras;
align-items: centras;
/ * Turinio dėžutės stilizavimas naudojant aukščio ir pločio ypatybes */
fono spalva: #fdf;
aukštis: 20em;
plotis: 30em;
}

Suteikite turinio erdvės kvėpuoti su paminkštinimu

Galite arba nustatyti padding-top, paminkštinimas-dešinėje, paminkštinimas-apačia, ir paminkštinimas-kairėn savybes atskirai arba naudokite santrumpą. Jei įmanoma, pabandykite naudoti santrumpą, nes tai gali sutaupyti šiek tiek laiko. Pažiūrėkime, kaip veikia paminkštinimas.

 /*************************
PADAVIMAS
*************************/
/ * Taikomas paminkštinimas */
padding-top: 5em;
padding-right: 2em;
paminkštintas dugnas: 8em;
paminkštinimas kairėje: 2em;
/ * Paminkštinimas santrumpa */
/ * viršuje/dešinėje/apačioje/kairėje */
paminkštinimas: 5em 2em 8em 2em;
/ * viršuje/horizontaliai/apačioje */
paminkštinimas: 5em 2em 8em;

Išėjimas:

Nubrėžkite linijas aplink paminkštinimą naudodami kraštą

Taikydami pasienio nuosavybę įsitikinkite, kad naudojate kraštinės spalva kad kraštinė nuo fono suteiktų skirtingą spalvą. Galite pasirinkti pasienio stiliaus individualiai arba vienu kartu, naudojant sutrumpintą savybę. Tas pats pasakytina ir apie ribos plotis nuosavybė.

Taip pat galite nustatyti ribos spindulys kad dėžutė būtų suapvalintais kampais, kurių spindulys yra px, rem, em, arba proc.

 /*************************
RIBOS
*************************/
/ * Pasienio ypatybių taikymas */
/ * Nustatykite apvado spalvą */
rėmelio spalva: rgb (148, 234, 255);
/ * Pasirinkite apvado stilių */
border-top-style: tvirtas;
border-right-style: brūkšninis;
border-bottom-style: griovelis;
siena-kairysis stilius: ketera;
/ * pasienio stiliaus santrumpa */
/ * viršuje/dešinėje/apačioje/kairėje */
pasienio stilius: tvirtas brūkšninis griovelis;
/ * Nustatykite kraštinės plotį */
border-top-width: 4em;
border-right-width: 2em;
border-bottom-width: 2em;
border-left-width: 2em;
/* ribos pločio santrumpa*/
/ * viršuje/dešinėje/apačioje/kairėje */
ribos plotis: 4em 2em 2em 2em;
/ * viršuje/horizontaliai/apačioje */
ribos plotis: 4em 2em 2em;
/ * pasienio nuosavybės santrumpa */
/* kraštas: 4em solid rgb (148, 234, 255); */
/ * Nustatyti ribos spindulį */
ribos spindulys: 5em;
ribos spindulys: 20%;

Išėjimas:

Pridėkite tarpą tarp dėžių su paraštėmis

Galite centruoti dėžutę horizontaliai naudodami paraštė: 0 auto, jei jis turi tam tikrą plotį.

 /*************************
MARGINAS
*************************/
/ * Taikant paraštės ypatybes */
margin-top: 4em;
paraštė-dešinė: 5em;
paraštė-apačia: 3em;
paraštė kairėn: 5em;
/ * Maržos santrumpa */
/ * viršuje/dešinėje/apačioje/kairėje */
paraštė: 4em 5em 3em 5em;
/ * viršuje/horizontaliai/apačioje */
paraštė: 4em 5em 3em;
/ * Naudojant automatinę paraštę */
paraštė: 3em auto;

Išėjimas:

Paraštės ypatybę galite nurodyti naudodami vieną, dvi, tris ar keturias reikšmes. Reikšmės gali būti ilgis, procentas arba panašus raktinis žodis automatinis. Supraskime, kaip tai veikia:

• Kai nurodote tik vieną reikšmę, tai reiškia, kad visos keturios pusės turės tą pačią paraštę.
• Kai nurodote dvi reikšmes, pirmoji reikšmė reiškia paraštė ir paraštė-apačia o antroji vertė nurodo paraštė-dešinė ir paraštė-kairė.
• Kai nurodote tris reikšmes, taikoma pirmoji ir paskutinė reikšmės paraštė ir paraštė-apačia atitinkamai. Vidutinė vertė yra horizontaliai sričiai, t.y. paraštė-dešinė ir paraštė-kairė.
• Kai nurodote visas keturias reikšmes, jos taikomos atitinkamai viršuje, dešinėje, apačioje ir kairėje (pagal laikrodžio rodyklę).

Atminkite, kad šiuos sparčiuosius klavišus taip pat galite naudoti užpildymui ir kraštinių ypatybėms.

Taip pat žiūrėkite: „Essential CSS3 Properties“ apgaulės lapas

Ar kada nors naudojote neigiamą maržą? Norėdami tai vizualizuoti, ištrinkime ekranas: nėra norėdami parodyti antrąjį mūsų vaizdą, tada nustatykite neigiamą paraštę.

/* .display {
ekranas: nėra! svarbu;
} */
.content-box {
ekranas: lankstus;
lanksti kryptis: eilutė;
align-items: centras;
fono spalva: #fdf;
aukštis: 20em;
plotis: 30em;
paminkštinimas: 5em 2em 8em;
pasienio stilius: tvirtas brūkšninis griovelis;
ribos plotis: 4em 2em 2em;
ribos spindulys: 20%;
/ * Naudojant neigiamą paraštę */
marža: 3em -20em 3em 5em;
}

Išėjimas:

Dėžutės modelis: tobulos „Pixel“ svetainės kūrimas

Dėžutės modelis leidžia apibrėžti erdvę tarp elementų, pridėti kraštus ir lengvai sukurti sudėtingai atrodantį išdėstymą. Galite iš karto pradėti kurti nuostabią svetainę. Tuo tarpu galite ištirti pasienio dėžutė išsamiai aprašykite nuosavybę ir žaiskite naudodami aukščiau esantį kodą.

Turėtumėte suprasti, kad yra ir kitų būdų, kaip CSS išdėstyti turinį. Tai apima „CSS Grid“ ir „CSS Flexbox“. Kai būsite patenkinti dėžutės modeliu, turėtumėte toliau mokytis apie šias alternatyvas.

CSS „Flexbox“ pamoka: pagrindai

Puikiai išdėstykite savo HTML elementus naudodami „CSS Flexbox“.

Skaityti toliau

Apie autorių