CSS - SOMO LA 12: Width, Height, Max/Min Width na Overflow

 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:

• visible – content itaonekana hata ikizidi

• hidden – content itakatwa isionekane

• scroll – scroll bar itaonekana daima

• auto – scroll itaonekana pale tu inapohitajika

✅ 5. Mfano wa Matumizi

.container {
  width: 100%;
  max-width: 800px;
  height: 300px;
  overflow: auto;
  background: #f5f5f5;
  padding: 20px;
}

<div class="container">
  Content ndefu hapa... ambayo inaweza kuzidi urefu wa box.
</div>

✅ Hitimisho

Kudhibiti ukubwa wa elementi ni jambo muhimu sana katika kuunda tovuti zinazokaa vizuri kwenye vifaa vyote. Kwa kutumia width, height, pamoja na min- na max-, unaweza kupata layout yenye ufanisi. Na kwa kutumia overflow, unaweza kuamua cha kufanya content inapozidi nafasi.

? Somo Linalofuata: SOMO LA 13 - Backgrounds katika CSS

Tutajifunza namna ya kutumia background-color, background-image, background-size, position, na repeat.

? Maswali ya Kujitathmini

1. width: 100%; ina maana gani?
   a) Element itakuwa na upana wa 100px
   b) Element itajaza upana wote wa mzazi wake
   c) Element itakuwa ndogo kama content
   d) Inamaanisha auto-size

2. Ili kuzuia element kupanuka zaidi ya 500px, utatumia ipi?
   a) min-width: 500px;
   b) width: auto;
   c) max-width: 500px;
   d) overflow: hidden;

3. overflow: hidden; inafanya nini?
   a) Inaonyesha scroll bar
   b) Inakata content inayozidi element
   c) Inaongeza padding
   d) Inaongeza spacing kati ya elements

4. Tofauti kati ya max-width na min-width ni ipi?
   a) Moja hudhibiti urefu, nyingine upana
   b) Moja huzidi nyingine kila wakati
   c) max-width huweka kiwango cha juu, min-width cha chini
   d) Zote hufanya kazi sawa

5. Ni ipi kati ya hizi ni vitengo halali vya upana?
   a) meter
   b) centimeter
   c) vh, vw
   d) kilo