CSS - SOMO LA 10: Box Model katika CSS
Katika somo hili utajifunza muundo wa boksi (Box Model) katika CSS. Box model ni mfumo wa msingi wa kupanga vipengele katika ukurasa wa HTML, ukiwa na sehemu kuu nne: content, padding, border, na margin.
? Utangulizi
Katika CSS, kila element ya HTML huonekana kama sanduku. Hili sanduku lina sehemu nne zinazowezesha kupanga muonekano na nafasi ya element hiyo. Hii inaitwa CSS Box Model. Kuelewa box model ni jambo la msingi sana kwa yeyote anayetaka kuwa mbunifu bora wa mtandao, kwani inasaidia kupangilia vyema vipengele vya ukurasa kwa usahihi na ufanisi.
✅ 1. Vipengele vya Box Model
CSS box model ina sehemu zifuatazo:
1. Content
-
Hiki ni kile kilichoandikwa au kuwekwa kwenye element (maandishi, picha, nk).
-
Urefu na upana wa element huanzia hapa.
2. Padding
-
Nafasi kati ya content na border.
-
Huongeza nafasi ya ndani ya boksi.
p {
padding: 20px;
}
3. Border
-
Ukuta unaozunguka element.
-
Unaweza kuupa rangi, unene, na mtindo.
p {
border: 2px solid black;
}
4. Margin
-
Nafasi kati ya element moja na nyingine.
-
Hutoa nafasi ya nje ya element.
p {
margin: 30px;
}
✅ 2. Muundo wa Mchoro
|----------------------------------|
| margin |
| |----------------------------| |
| | border | |
| | |----------------------| | |
| | | padding | | |
| | | [ content here ] | | |
| | |----------------------| | |
| |----------------------------| |
|----------------------------------|
✅ 3. box-sizing Property
Kwa kawaida, upana na urefu wa element hupimwa kutoka kwenye content pekee. Ukiongeza padding na border, element huonekana kuwa kubwa kuliko ulivyotarajia.
Ili kudhibit...
help_outlineZoezi la Maswali
Umeionaje Makala hii.. ?
Share On:
👉1 Bongolite - Game zone - Play free game 👉2 Madrasa kiganjani 👉3 ai web app 👉4 Sira ya Mtume Muhammad (s.a.w) 👉5 web hosting 👉6 Simulizi za Hadithi Audio
Post zinazofanana:
CSS - SOMO LA 24: CSS Variables (Custom Properties)
Katika somo hili, tutajifunza kuhusu CSS Variables, au Custom Properties. Utajifunza jinsi ya kuunda, kuitumia, na faida za kutumia variables katika CSS ili kuweka msimamizi mzuri wa rangi, ukubwa, na mitindo mingine ya kurudia-rudia.
Soma Zaidi...CSS - somo la 3: syntax za css yaani sheria za uandishi wa css
Katika somo hili utakwenda kujifunza sheria za uandish wa css yaani syntax za css
Soma Zaidi...CSS - SOMO LA 9: Margin na Padding
Katika somo hili utajifunza tofauti kati ya margin na padding, kazi ya kila moja, jinsi ya kuzipima, na jinsi zinavyotumika kudhibiti nafasi ndani na nje ya elementi kwenye ukurasa wa HTML.
Soma Zaidi...CSS - SOMO LA 16: Flexbox Basics
Katika somo hili, utajifunza msingi wa mfumo wa Flexbox unaotumika kupanga elementi kwa usahihi ndani ya kontena. Utajifunza kuhusu display: flex;, pamoja na properties muhimu kama justify-content, align-items, flex-direction, na gap.
Soma Zaidi...CSS - somo la 1: Maana ya CSS, kazi zake na historia yake
Katika somo hili utakwenda kujifunza maana ya CSS, pia nitakujulisha kazi zake. Mwisho utatambuwa historia ya CSS toka kuanzishwa.
Soma Zaidi...CSS - somo la 5: Njia tano zinazotumika kuweka rangi kwenye css
Katika somo hili utajifunza aina tano za kuweka rangi kw akutumia css
Soma Zaidi...