Näidetega selgitatud CSS -i kastimudel

Kui plaanite ehitada vinge veebilehe paigutuse, peate teadma veeriste, ääriste, polsterduste ja sisu kohta. Iga veebidisaini element, olgu see pilt või tekst, kasutab nende omadustega kasti. Karbimudeliga mängides saate hõlpsalt keerukaid paigutusi luua. Selles artiklis lahkame CSS -i kastimudeli ja näitame teile, kuidas neid omadusi kasutada koos praktiliste näidetega.

Mis on CSS -kasti mudel?

CSS -i kastimudel on standardi loodud World Wide Web Consortium. See kirjeldab kõiki HTML -dokumendi elemente ristkülikukujuliste kastidena, millel on oma mõõtmed. Need kastid sisaldavad sisuala ja valikulisi ümbritsevaid ääre-, ääris- ja polsterdusalasid. Niisiis, uurime CSS -i kasti osi.

Avame CSS -i kastimudeli neli kihti.

Esimene kiht: sisu

Sisuala sisaldab elemendi põhisisu, mis võib olla pilt, tekst või mis tahes vormis meediasisu. Plokitaseme elementide mõõtmeid saate muuta, kasutades kõrgus ja laius omadused.

Teine kiht: polsterdus

Täidis on sisukasti ja selle äärisekasti vahe. Kuigi see asub teie sisu ümber tühikuna, saate erinevuse visualiseerimiseks kasutada taustavärvi. Saate kandideerida

polster-top, polster-paremal, polster-altja polster-vasak omadused ruumi muutmiseks.

Kolmas kiht: piir

Ääris mähib sisu ja polsterdusala. Äärise suurust ja stiili saate muuta kasutades piiri laius, piiri stiilisja äärisevärv omadused.

Neljas kiht: marginaal

Karbimudeli viimast kihti kasutatakse laialdaselt elementide vahelise ruumi loomiseks. Veerised mähivad sisu, polstri ja piiriala. Sa võid kasutada marginaal,äär-parem, varu-altja varu-vasak omadused. Samuti saate marginaali omadusele anda negatiivse väärtuse või auto suurepäraste paigutustehnikate saavutamiseks.

Projekti seadistamine CSS -i kastimudeli jaoks

Koostame miniprojekti, et demonstreerida põhikasti mudelit koos sisukasti ja polsterduse, äärise ja veerise atribuutidega. Võite kasutada teksti, pilti või meediasisu. Alustuseks veendume, et see on korralikult üles ehitatud.

Struktuur HTML -iga

Väljund:

Saate kasutada oma brauseri sisseehitatud funktsioone, näiteks Chrome'i arendustööriistad, et näha, mis toimub. Kasutame kahte Unsplash'i pilti. Lihtsuse huvides peidame nutitelefoni pildi kasutades kuva: puudub; kuni vajame seda hiljem.

Stiilimine CSS -i abil

/*************************
PÕHISTIIL
*************************/
* {
varu: 0 pikslit;
polster: 0px;
}
keha {
ekraan: paindlik;
painduv suund: rida;
} 
.display {
kuva: pole! oluline;
}

Nüüd kujundame sisukasti. Esiteks seadistame kõrgus ja laius kujutisest. Samuti aitab taustavärvi andmine paremini visualiseerida. Niisiis, teeme ära.

/*************************
SISUKAST
*************************/
.content-box {
ekraan: paindlik;
painduv suund: rida;
õigustama-sisu: keskus;
align-items: keskel;
/ * Sisukasti kujundamine kõrguse ja laiuse omaduste abil */
taustavärv: #fdf;
kõrgus: 20em;
laius: 30em;
}

Andke siseruumidele polsterdamiseks hingamisruumi

Saate kas määrata polster-top, polster-paremal, polster-altja polster-vasak atribuute ükshaaval või kasutage lühendit. Proovige võimaluse korral kasutada lühendit, kuna see võib teie aega kokku hoida. Vaatame, kuidas polsterdus töötab.

 /*************************
PADDING
*************************/
/ * Polstri rakendamine */
polster-top: 5em;
polster-parem: 2em;
polster-põhi: 8em;
polster-vasak: 2em;
/ * Polsterduskiri */
/ * üleval/paremal/all/vasakul */
polster: 5em 2em 8em 2em;
/ * ülevalt/horisontaalselt/alt */
polster: 5em 2em 8em;

Väljund:

Joonista äärise abil jooned ümber polstri

Piirivara rakendamisel veenduge, et kasutate äärisevärv atribuut, et anda äärisele taustast erivärv. Saate valida piiri stiilis kas individuaalselt või ühe korraga, kasutades kiirkirja omadust. Sama kehtib ka piiri laius vara.

Samuti saate määrata piiri raadius anda kastile ümardatud nurgad, mille raadius on sissepoole px, rem, emvõi protsenti.

 /*************************
PIIR
*************************/
/ * Piiriomaduste rakendamine */
/ * Määra äärise värv */
äärisevärv: rgb (148, 234, 255);
/ * Valige äärise stiil */
border-top-style: kindel;
border-right-style: katkendlik;
border-bottom-style: soon;
ääris-vasak-stiil: ridge;
/ * äärise stiilis kiirkiri */
/ * üleval/paremal/all/vasakul */
ääris-stiil: kindel katkendlik sooneharja;
/ * Määra äärise laius */
border-top-width: 4em;
piir-parem-laius: 2em;
piiri-põhja laius: 2em;
piir-vasak-laius: 2em;
/* äärise laiusega lühikirjeldus*/
/ * üleval/paremal/all/vasakul */
piiri laius: 4em 2em 2em 2em;
/ * ülevalt/horisontaalselt/alt */
piiri laius: 4em 2em 2em;
/ * piiriomandi lühend */
/* piir: 4em tahke rgb (148, 234, 255); */
/ * Määra piiri raadius */
piiri raadius: 5em;
piiri raadius: 20%;

Väljund:

Lisage marginaalidega ruumi kastide vahele

Saate kasti horisontaalselt tsentreerida, kasutades veeris: 0 automaatne, tingimusel, et sellel on kindel laius.

 /*************************
MARGINAAL
*************************/
/ * Marginaali omaduste rakendamine */
margin-top: 4em;
varu-parem: 5em;
margin-bottom: 3em;
veeris-vasak: 5em;
/ * Marginaali lühend */
/ * üleval/paremal/all/vasakul */
varu: 4em 5em 3em 5em;
/ * ülevalt/horisontaalselt/alt */
varu: 4em 5em 3em;
/ * Automaatmarginaali kasutamine */
varu: 3em auto;

Väljund:

Veerise atribuudi saate määrata ühe, kahe, kolme või nelja väärtusega. Väärtused võivad olla pikkus, protsent või märksõna auto. Mõistame, kuidas see toimib:

• Kui määrate ainult ühe väärtuse, tähendab see, et kõigil neljal küljel on sama varu.
• Kui määrate kaks väärtust, tähistab esimene väärtus margin-top ja varu-alt samas kui teine ​​väärtus määrab äär-parem ja varu-vasak.
• Kui määrate kolm väärtust, kehtivad esimene ja viimane margin-top ja varu-alt vastavalt. Keskmine väärtus on horisontaalse ala jaoks, st äär-parem ja varu-vasak.
• Kui määrate kõik neli väärtust, kehtivad need vastavalt ülevalt, paremalt, alt ja vasakult (päripäeva).

Pange tähele, et neid otseteid saate kasutada ka polsterdamiseks ja ääriste omaduste jaoks.

Vaata ka: Oluliste CSS3 atribuutide petuleht

Kas olete kunagi kasutanud negatiivset marginaali? Selle visualiseerimiseks kustutame kuva: puudub meie teise pildi kuvamiseks, seejärel määrake negatiivne veeris.

/* .display {
kuva: pole! oluline;
} */
.content-box {
ekraan: paindlik;
painduv suund: rida;
align-items: keskel;
taustavärv: #fdf;
kõrgus: 20em;
laius: 30em;
polster: 5em 2em 8em;
ääris-stiil: kindel katkendlik sooneharja;
piiri laius: 4em 2em 2em;
piiri raadius: 20%;
/ * Kasutades negatiivset marginaali */
varu: 3em -20em 3em 5em;
}

Väljund:

Karbimudel: Pixeli täiusliku veebisaidi loomine

Kastimudel võimaldab teil määratleda ruumi elementide vahel, lisada piire ja hõlpsasti luua keeruka välimusega paigutust. Saate kohe alustada suurepärase veebisaidi loomisega. Vahepeal saate uurida piir-kast kinnisvara üksikasjalikult ja mängige ülaltoodud koodiga.

Peaksite mõistma, et CSS -i sisu paigutamiseks on ka teisi meetodeid. Nende hulka kuuluvad CSS Grid ja CSS Flexbox. Kui olete karbimudeliga rahul, peaksite jätkama nende alternatiivide tundmaõppimist.

CSS Flexboxi õpetus: põhitõed

CSS Flexboxi abil saate HTML -elemendid ideaalselt paigutada.

Loe edasi

Autori kohta