picha

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

.box {
  width: 300px;
  height: 200px;
}

Unaweza kutumia vitengo mbalimbali:


✅ 2. min-width na max-width

.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:

Ingia sasa ili uweze kusoma makala hii yote.

Jiunge nasi WhatsApp kupata update zetu
Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

       
Author: Rajabu image Tarehe: 2025-06-23 19:19:34 Topic: CSS Main: Masomo File: Download PDF Views 545

Share On:

Share follows: 0 | Unique share links followed: 0
Sponsored links
👉1 Tafasiri ya Riyadh Swalihina     👉2 Dua za Mitume na Manabii     👉3 Madrasa kiganjani     👉4 web hosting     👉5 Kitau cha Fiqh     👉6 Kitabu cha Afya    

Post zinazofanana:

CSS - SOMO LA 21: CSS Units

Katika somo hili, utajifunza vipimo vinavyotumika kwenye CSS kama vile px, em, rem, %, vw, na vh. Vipimo hivi hutumika kuweka ukubwa wa maandishi, padding, margin, urefu, na upana wa vipengele kwenye tovuti.

Soma Zaidi...
CSS - SOMO LA 15: Float na Clear katika CSS

Katika somo hili utajifunza jinsi ya kutumia float ili kupanga elementi upande wa kushoto (left) au kulia (right). Pia utajifunza jinsi ya kutumia clear kuondoa athari za float na kuhakikisha layout yako inabaki thabiti.

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 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 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 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...