JavaScript အတွက် CSS တွင် အစိတ်အပိုင်းများကို တိုးချဲ့ခြင်း

CSS ၏ width နှင့် height ဂုဏ်သတ္တိများကို သတ်မှတ်ခြင်းသည် အစိတ်အပိုင်းသည် သတ်မှတ်ထားသည့်အရွယ်အစား ဖြစ်လာမည်ဟု အာမခံချက်မပေးပါ။ ဥပမာများဖြင့် ကြည့်ရှုကြပါစို့။

ဥပမာ

လက်ရှိတွင် အစိတ်အပိုင်း၏ အရွယ်အစားများသည် သတ်မှတ်ထားသည်များနှင့် ကိုက်ညီနေပါသည်:

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

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

Результат:

ဥပမာ

ယခု အစိတ်အပိုင်းအား padding ဂုဏ်သတ္တိကို သတ်မှတ်ကြည့်ပါမည်။ ရလဒ်အနေဖြင့် အစိတ်အပိုင်း၏ အမှန်တကယ် အနံသည် ပိုကြီးလာပြီး သတ်မှတ်ထားသော အတွင်းဘက် ခြားနားချက် တန်ဖိုးဖြင့် တိုးချဲ့သွားပါမည်:

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

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

Результат:

ဥပမာ

နယ်နမိတ်ကြောင်း ရှိခြင်းသည်လည်း အစိတ်အပိုင်းကို တိုးချဲ့စေပါသည်:

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

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

Результат:

ဥပမာ

box-sizing ဂုဏ်သတ္တိသည် အထက်ဖော်ပြပါ အပြုအမူကို ပြောင်းလဲခွင့်ပေးပါသည်။ အတွင်းဘက် ခြားနားချက် သို့မဟုတ် နယ်နမိတ်ကြောင်းတို့က အစိတ်အပိုင်းကို မတိုးချဲ့စေရန် ပြုလုပ်နိုင်ပါသည်။ ထိုသို့ပြုလုပ်ရန် ဤဂုဏ်သတ္တိအား border-box တန်ဖိုးကို သတ်မှတ်ပေးရပါမည်:

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

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

Результат:

ဖော်ပြပါအရာကို နားလည်ရခြင်း၏ အရေးပါမှု

JavaScript ၏ ရှုထောင့်မှ ကြည့်လျှင် ဖော်ပြပါအခြေအနေသည် သိပ်အဆင်ပြေသည်မဟုတ်ပါ။ ဘာကြောင့်ဆိုသော် width ဂုဏ်သတ္တိ၏ တန်ဖိုးကို ဖတ်ပြီးပါက အစိတ်အပိုင်းသည် ထိုအနံအတိအကျ ရှိမည်ဟု ကျွန်ုပ်တို့ အာမခံချက်မရနိုင်တော့ပါ။