CSS - SOMO LA 12: Width, Height, Max/Min Width na Overflow
Katika somo hili, utajifunza jinsi ya kudhibiti upana (width) na urefu (height) wa elementi katika CSS. Pia utaelewa tofauti kati ya max-width, min-width, na jinsi overflow inavyodhibiti tabia ya content inayoizidi element.
Utangulizi
Katika kuunda layout ya tovuti, ni muhimu sana kudhibiti ukubwa wa elementi ili zitoshe vizuri kwenye ukurasa na ziweze kutumika kwenye vifaa vya ukubwa tofauti. CSS hutoa njia mbalimbali za kuweka mipaka ya vipimo hivi kwa kutumia width, height, max-width, min-height, n.k. Pia, overflow hutumika kudhibiti content inapozidi nafasi ya element.
✅ 1. width na height
-
widthhudhibiti upana wa element. -
heighthudhibiti urefu wa element.
.box {
width: 300px;
height: 200px;
}
Unaweza kutumia vitengo mbalimbali:
-
px– pixel -
%– asilimia kulingana na parent -
vw– asilimia ya upana wa dirisha -
vh– asilimia ya urefu wa dirisha
✅ 2. min-width na max-width
-
min-widthhuzuia element kufinywa kupita kiasi. -
max-widthhuzuia element kupanuka kupita kiasi.
.box {
width: 100%;
max-width: 600px;
min-width: 300px;
}
💡 Hii ni muhimu sana kwenye responsive design — mfano kwenye simu vs kompyuta.
✅ 3. min-height na max-height
Kama ilivyo kwa width, hizi hudhibiti kiwango cha chini na juu cha urefu.
.box {
min-height: 150px;
max-height: 400px;
}
✅ 4. overflow
overflow hutumika kudhibiti tabia ya content inapozidi ukubwa wa container.
.box {
width: 300px;
height: 200px;
overflow: scroll;
}
Aina za overflow:">...
Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
👉1 Simulizi za Hadithi Audio 👉2 Sira ya Mtume Muhammad (s.a.w) 👉3 Madrasa kiganjani 👉4 Bongolite - Game zone - Play free game 👉5 Kitau cha Fiqh 👉6 web hosting
Post zinazofanana:
CSS - SOMO LA 33: CSS Frameworks
Katika somo hili tutajifunza kuhusu CSS frameworks mbalimbali zinazosaidia kuharakisha uundaji wa mitindo kwenye tovuti. Tutazungumzia frameworks maarufu kama W3.CSS, Bootstrap, Google Fonts, na nyinginezo, faida, matumizi, na tofauti zao.
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 22: CSS Transition na Animation
Katika somo hili, tutajifunza jinsi ya kuleta miondoko na harakati kwenye tovuti kwa kutumia CSS Transitions na Animations. Hii itasaidia kuboresha muonekano na matumizi ya tovuti.
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 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 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.
Soma Zaidi...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 11: Mitindo ya Border (Border Styles)
Katika somo hili, utajifunza jinsi ya kudhibiti mipaka (borders) ya vipengele kwa kutumia CSS. Tutajifunza namna ya kuweka unene wa border, rangi, aina ya mstari, na pia jinsi ya kutumia border kwa upande mmoja tu.
Soma Zaidi...CSS - SOMO LA 19: Pseudo-classes na Pseudo-elements
Katika somo hili, utajifunza kuhusu pseudo-classes kama :hover, :first-child, na :last-child, pamoja na pseudo-elements kama ::before, ::after, na ::selection. Hizi husaidia kubadili au kuongeza mitindo maalum kulingana na hali ya elementi au sehemu maalum ya elementi.
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...