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 web hosting 👉2 Kitau cha Fiqh 👉3 Simulizi za Hadithi Audio 👉4 Kitabu cha Afya 👉5 ai web app 👉6 Bongolite - Game zone - Play free game
Post zinazofanana:
CSS - SOMO LA 26: CSS Specificity (Kipaumbele cha Styles)
Katika somo hili, tutajifunza kuhusu CSS Specificity — yaani mfumo wa kipaumbele unaotumiwa na kivinjari kuchagua ni mtindo (style) upi utumike iwapo kuna migongano kati ya selectors mbalimbali. Utaelewa jinsi ya kupanga selectors zako vizuri ili kuzuia matatizo ya mitindo kutofanya kazi kama ulivyotarajia.
Soma Zaidi...CSS - somo la 2: Jinsi ya ku weka code za css kwenye HTML
katika somo hili utajifunza jinsi ya ku install css kwenye ukurasa wa html
Soma Zaidi...CSS - SOMO LA 7: Kutumia Fonti (Fonts) kwenye CSS
Katika somo hili utajifunza jinsi ya kudhibiti mwonekano wa maandishi kwa kutumia fonti kwenye CSS. Utajifunza jinsi ya kubadilisha aina ya fonti, ukubwa, mtindo, unene, na mpangilio wa maandishi ili yaweze kuonekana kwa mvuto na usomaji bora.
Soma Zaidi...CSS - SOMO LA 17: Flexbox Advanced
Katika somo hili, utajifunza vipengele vya juu zaidi vya Flexbox: flex-wrap, flex-grow, flex-shrink, na flex-basis. Pia tutajifunza jinsi ya kujenga muundo wa safu (rows) na nguzo (columns) kwa kutumia Flexbox layout.
Soma Zaidi...CSS - SOMO LA 28: CSS Timing Functions
Katika somo hili tutajifunza kuhusu CSS Timing Functions, ambazo hutumika kudhibiti kasi na mtiririko wa transition na animation. Utaelewa tofauti kati ya ease, linear, ease-in, ease-out, ease-in-out, pamoja na jinsi ya kutumia cubic-bezier() kwa kudhibiti mwendo wa mabadiliko kwenye elementi.
Soma Zaidi...CSS - SOMO LA 13: Display Property
Katika somo hili utajifunza kuhusu property muhimu ya CSS inayoitwa display, ambayo huamua jinsi element inavyoonyeshwa kwenye ukurasa. Tutachambua aina kuu za display: block, inline, inline-block, na none.
Soma Zaidi...