Kupanua Vipengele katika CSS kwa JavaScript

Kuainisha sifa za CSS width na height hakuhakikishii kuwa kipengele kitakuwa cha ukubwa ulioainishwa. Hebu tuangalie kwa mifano.

Mfano

Kwa sasa vipimo vya kipengele vinafanana na vile vilivyoainishwa:

html<div id="elem">
  maandishi
</div>

css#elem {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
}

Результат:

Mfano

Na sasa hebu tuainishe kipengele sifa padding. Kama matokeo, upana halisi wa kipengele utakuwa zaidi na utapanuka kwa thamani iliyoainishwa ya ukingo wa ndani:

html<div id="elem">
  maandishi
</div>

css#elem {
  padding: 25px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
}

Результат:

Mfano

Uwepo wa mpaka pia unapanua kipengele:

html<div id="elem">
  maandishi
</div>

css#elem {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
  border: 20px solid #F0D7A1;
}

Результат:

Mfano

Sifa box-sizing inaruhusu kubadilisha tabia iliyoelezwa hapo juu. Inawezekana kufanya hivi, ili ukingo wa ndani, wala mpaka usipanue kipengele. Kwa hili sifa hii inahitaji kupewa thamani border-box:

html<div id="elem">
  maandishi
</div>

css#elem {
  box-sizing: border-box;
  padding: 20px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
  border: 20px solid #F0D7A1;
}

Результат:

Umuhimu wa Ulielezwa

Kutoka kwa mtazamo wa JavaScript hali iliyoelezwa haina fursa nzuri. Hata hivyo inageuka, kuwa kusoma thamani ya sifa width hatuwezi kabisa kuwa na uhakika kwamba kipengele kitakuwa hasa cha upana huo.