CSS kastes modelis izskaidrots ar piemēriem

Ja plānojat izveidot lielisku tīmekļa lapas izkārtojumu, jums jāzina par malām, apmalēm, polsterējumu un saturu. Katrs tīmekļa dizaina elements, neatkarīgi no tā, vai tas ir attēls vai teksts, izmanto lodziņu ar šīm īpašībām. Jūs varat viegli izveidot sarežģītus izkārtojumus, spēlējoties ar kastes modeli. Šajā rakstā mēs sadalīsim CSS kastes modeli un parādīsim, kā izmantot šīs īpašības, izmantojot praktiskus piemērus.

Kas ir CSS kastes modelis?

CSS kastes modelis ir standarts, ko izveidojis Vispasaules tīmekļa konsorcijs. Tajā visi HTML dokumenta elementi ir aprakstīti kā taisnstūra kastes ar saviem izmēriem. Šajās kastēs ir satura apgabals un izvēles apkārtējās malas, apmales un polsterējuma zonas. Tātad, izpētīsim CSS kastes daļas.

Atklāsim četrus CSS kastes modeļa slāņus.

Pirmais slānis: saturs

Satura apgabals satur elementa galveno saturu, kas varētu būt attēls, teksts vai jebkāda veida multivides saturs. Bloka līmeņa elementu izmērus varat mainīt, izmantojot augstums un platums īpašības.

Otrais slānis: polsterējums

Polsterējums ir atstarpe starp satura lodziņu un tās apmales lodziņu. Lai gan tas atrodas ap jūsu saturu kā atstarpe, atšķirības vizualizēšanai varat izmantot fona krāsu. Jūs varat pieteikties polsterējums, polsterējums-pa labi, polsterējums-dibens, un polsterējums-pa kreisi īpašības, lai mainītu telpu.

Trešais slānis: robeža

Apmale iesaiņo saturu un polsterējuma zonu. Apmales izmēru un stilu var mainīt, izmantojot robežas platums, robežas stilā, un apmales krāsa īpašības.

Ceturtais slānis: Rezerve

Kastes modeļa pēdējais slānis tiek plaši izmantots, lai radītu atstarpi starp elementiem. Mala aptver saturu, polsterējumu un apmales zonu. Tu vari izmantot marginala,starpība-pa labi, margin-bottom, un margin-left īpašības. Maržas īpašumam varat piešķirt arī negatīvu vērtību vai auto lai sasniegtu dažas lieliskas izvietošanas metodes.

Projekta iestatīšana CSS kastes modelim

Izveidosim mini projektu, lai demonstrētu pamata kastes modeli ar satura lodziņu un polsterējuma, apmales un piemales īpašībām. Varat izmantot teksta, attēla vai multivides saturu. Mēs sāksim, pārliecinoties, ka tas ir pareizi strukturēts.

Struktūra ar HTML

Izeja:

Varat izmantot pārlūkprogrammas iebūvētās funkcijas, piemēram, Chrome izstrādātāju rīki, lai redzētu, kas notiek. Mēs izmantojam divus attēlus no Unsplash. Vienkāršības labad mēs slēpsim viedtālruņa attēlu, izmantojot displejs: nav; līdz mums tas būs vajadzīgs vēlāk.

Stils, izmantojot CSS

/*************************
PAMATSTILS
*************************/
* {
mala: 0 pikseļi;
polsterējums: 0 pikseļi;
}
ķermenis {
displejs: elastīgs;
elastīgs virziens: rinda;
} 
.display {
displejs: nav! svarīgi;
}

Tagad veidosim mūsu satura lodziņa stilu. Pirmkārt, mēs iestatīsim augstums un platums no attēla. Turklāt fona krāsas piešķiršana palīdz labāk vizualizēt. Tātad, darīsim to.

/*************************
SATURA KASTE
*************************/
.content-box {
displejs: elastīgs;
elastīgs virziens: rinda;
attaisnot saturu: centrs;
align-items: centrs;
/ * Satura lodziņa veidošana, izmantojot augstuma un platuma rekvizītus */
fona krāsa: #fdf;
augstums: 20em;
platums: 30em;
}

Dodiet satura telpai elpu ar polsterējumu

Jūs varat iestatīt polsterējums, polsterējums-pa labi, polsterējums-dibens, un polsterējums-pa kreisi īpašībām atsevišķi vai izmantojiet saīsinājumu. Ja iespējams, mēģiniet izmantot saīsinājumu, jo tas var ietaupīt laiku. Apskatīsim, kā darbojas polsterējums.

 /*************************
PADĒJUMS
*************************/
/ * Polsterējuma uzlikšana */
polsterējums-top: 5em;
polsterējums pa labi: 2em;
polsterējums apakšā: 8em;
polsterējums pa kreisi: 2em;
/ * Polsterējums saīsinājums */
/ * augšā/pa labi/apakšā/pa kreisi */
polsterējums: 5em 2em 8em 2em;
/ * augšā/horizontāli/apakšā */
polsterējums: 5em 2em 8em;

Izeja:

Zīmējiet līnijas ap polsterējumu, izmantojot apmali

Piemērojot robežas īpašumu, pārliecinieties, vai izmantojat apmales krāsa īpašumu, lai apmalei piešķirtu atšķirīgu krāsu no fona. Jūs varat izvēlēties robežas stilā individuāli vai vienā piegājienā, izmantojot saīsinātās īpašības. Tas pats attiecas uz robežas platums īpašums.

Varat arī iestatīt robežas rādiuss lai kastē būtu noapaļoti stūri ar rādiusu iekšā px, rem, emvai procenti.

 /*************************
ROBEŽA
*************************/
/ * Robežu rekvizītu lietošana */
/ * Iestatiet apmales krāsu */
apmales krāsa: rgb (148, 234, 255);
/ * Izvēlieties apmales stilu */
border-top-style: ciets;
robežas labās puses stils: pārtraukta;
apmales apakšējais stils: grope;
robeža-kreisais stils: grēda;
/ * apmales stila stenogramma */
/ * augšā/pa labi/apakšā/pa kreisi */
apmales stils: cieta svītraina gropes kores;
/ * Iestatīt apmales platumu */
border-top-width: 4em;
border-right-width: 2em;
border-bottom-width: 2em;
robeža-kreisais platums: 2em;
/* apmales platuma stenogramma*/
/ * augšā/pa labi/apakšā/pa kreisi */
robežas platums: 4em 2em 2em 2em;
/ * augšā/horizontāli/apakšā */
robežas platums: 4em 2em 2em;
/ * pierobežas īpašuma saīsinājums */
/* robeža: 4em cieta rgb (148, 234, 255); */
/ * Iestatīt robežas rādiusu */
robežas rādiuss: 5em;
robežas rādiuss: 20%;

Izeja:

Pievienojiet atstarpi starp kastēm ar rezervi

Jūs varat centrēt lodziņu horizontāli, izmantojot mala: 0 auto, ja tam ir noteikts platums.

 /*************************
MARGINA
*************************/
/ * Piemales rekvizītu piemērošana */
margin-top: 4em;
marg-right: 5em;
margin-bottom: 3em;
margin-left: 5em;
/ * Maržas saīsinājums */
/ * augšā/pa labi/apakšā/pa kreisi */
rezerve: 4em 5em 3em 5em;
/ * augšā/horizontāli/apakšā */
rezerve: 4em 5em 3em;
/ * Automātiskās piemales izmantošana */
mala: 3em auto;

Izeja:

Piemales īpašumu var norādīt, izmantojot vienu, divas, trīs vai četras vērtības. Vērtības var būt garums, procentuālā daļa vai līdzīgs atslēgvārds auto. Sapratīsim, kā tas darbojas:

• Norādot tikai vienu vērtību, tas nozīmē, ka visām četrām pusēm būs vienāda mala.
• Norādot divas vērtības, pirmā vērtība nozīmē margin-top un margin-bottom bet otrā vērtība norāda starpība-pa labi un margin-left.
• Norādot trīs vērtības, pirmā un pēdējā attiecas uz margin-top un margin-bottom attiecīgi. Vidējā vērtība ir horizontālajai zonai, t.i. starpība-pa labi un margin-left.
• Norādot visas četras vērtības, tās attiecas attiecīgi uz augšējo, labo, apakšējo un kreiso pusi (pulksteņrādītāja virzienā).

Ņemiet vērā, ka šos īsceļus varat izmantot arī polsterējuma un apmales īpašībām.

Skatīt arī: Būtiskā CSS3 rekvizītu apkrāptu lapa

Vai esat kādreiz izmantojis negatīvu rezervi? Lai to vizualizētu, izdzēsīsim displejs: nav lai parādītu mūsu otro attēlu, pēc tam iestatiet negatīvu rezervi.

/* .display {
displejs: nav! svarīgi;
} */
.content-box {
displejs: elastīgs;
elastīgs virziens: rinda;
align-items: centrs;
fona krāsa: #fdf;
augstums: 20em;
platums: 30em;
polsterējums: 5em 2em 8em;
apmales stils: cieta svītraina gropes kores;
robežas platums: 4em 2em 2em;
robežas rādiuss: 20%;
/ * Izmantojot negatīvo rezervi */
rezerve: 3em -20em 3em 5em;
}

Izeja:

Kastes modelis: perfekta vietnes izveide

Kastes modelis ļauj noteikt atstarpi starp elementiem, pievienot apmales un viegli izveidot sarežģīta izkārtojumu. Jūs varat uzreiz sākt, lai izveidotu lielisku vietni. Tikmēr jūs varat izpētīt robežas kaste īpašumu detalizēti un spēlēties ar iepriekš minēto kodu.

Jums vajadzētu saprast, ka ir arī citas metodes satura izvietošanai CSS. Tie ietver CSS Grid un CSS Flexbox. Kad esat apmierināts ar kastes modeli, jums vajadzētu turpināt uzzināt par šīm alternatīvām.

CSS Flexbox apmācība: pamati

Perfekti novietojiet savus HTML elementus, izmantojot CSS Flexbox.

Lasīt Tālāk

Par autoru