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:
-
visible– content itaonekana hata ikizidi -
hidden– content itakatwa isionekane -
scroll– scroll bar itaonekana daima -
auto– scroll itaonek...
Umeionaje Makala hii.. ?
Share On:
👉1 Kitabu cha Afya 👉2 Tafasiri ya Riyadh Swalihina 👉3 Kitau cha Fiqh 👉4 ai web app 👉5 Simulizi za Hadithi Audio 👉6 Bongolite - Game zone - Play free game
Post zinazofanana:
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 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 31: CSS Filters (blur, brightness, contrast.)
Katika somo hili tutajifunza kuhusu CSS Filters — mitindo inayotumika kuhariri mwonekano wa picha, video, au elementi nyingine kwa kuongeza athari kama blur, brightness, contrast, grayscale, na nyinginezo. Hii huifanya tovuti kuwa ya kisasa, ya kuvutia, na yenye mwingiliano mzuri.
Soma Zaidi...CSS - somo la 6: Kuweka Background kwenye HTML kwa kutumia CSS
Katika somo hili, utajifunza jinsi ya kudhibiti muonekano wa sehemu ya nyuma (background) ya HTML element kwa kutumia CSS. Utaweza kuongeza rangi, picha, kuweka picha zisirudiwarudiwe, na hata kusogeza picha kwenye maeneo tofauti ya ukurasa.
Soma Zaidi...CSS - SOMO LA 27: Kutumia @import Katika CSS
Katika somo hili, tutajifunza kuhusu @import — amri inayotumika kuingiza faili moja la CSS ndani ya jingine. Tutaona namna ya kuitumia, faida zake, hasara zake, na tofauti kati yake na njia mbadala ya <link> ndani ya HTML.
Soma Zaidi...CSS - SOMO LA 8: Upambaji wa Maandishi (Text Styling)
Katika somo hili, utajifunza mbinu mbalimbali za kubadilisha muonekano wa maandishi kwa kutumia CSS, kama vile kupamba maandishi kwa mistari, kivuli, nafasi kati ya herufi, na mpangilio wa maneno.
Soma Zaidi...