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`

width hudhibiti upana wa element.
height hudhibiti 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-width huzuia element kufinywa kupita kiasi.
max-width huzuia 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:">...

📄 Download Post hii

Download App Yetu

Jifunze zaidi, na wasiliana nasi ukiwa na App yetu. Bofya hapa chini kuipakua sasa!

Pakua Sasa

Zoezi la Maswali

Nyuma Endelea

Umeionaje Makala hii.. ?

Nzuri Mbaya Save

Author: Rajabu

Tarehe: 1970-01-01 03:33:45 Topic: CSS Main: ICT File: Download PDF Views 10

Share On:

Facebook WhatsApp

Sponsored links
👉1 Madrasa kiganjani 👉2 Bongolite - Game zone - Play free game 👉3 Sira ya Mtume Muhammad (s.a.w) 👉4 kitabu cha Simulizi 👉5 Kitau cha Fiqh 👉6 Kitabu cha Afya