box-sizing ဂုဏ်သတ္တိ

box-sizing ဂုဏ်သတ္တိသည် အချက်၏အရွယ်အစားများကို တွက်ချက်ပုံနည်းလမ်းကို ပြောင်းလဲခွင့်ပြုပါသည်။

စံထားချက်အရ padding ထည့်သွင်းခြင်းသည် အချက်ကို ချဲ့ထွင်စေပါသည်။ အကယ်၍ ကျွန်ုပ်တို့သည် အကျယ် width ကို 100px နှင့် padding-left ကို 20px ဟုသတ်မှတ်ထားပါက၊ အချက်၏ တကယ့်အကျယ်သည် 120px ဖြစ်လာမည်ဖြစ်သည်။

ထို့အပြင် အကယ်၍ ကျွန်ုပ်တို့သည် border-left ကို 10px ဟုထပ်မံသတ်မှတ်ပါက၊ အချက်၏ တကယ့်အကျယ်သည် 130px ဖြစ်လာမည်ဖြစ်သည်။ ဆိုလိုသည်မှာ padding နှင့် border တို့သည် ဘလောက်ကို ချဲ့ထွင်စေပါသည် (အကျယ်နှင့် အမြင့်နှစ်ခုစလုံးတွင်)။ ဤအပြုအမူကို box-sizing ကိုအသုံးပြု၍ ပြောင်းလဲနိုင်ပါသည်။

ဝါကျဖွဲ့စည်းပုံ

cssရွေးချယ်သူ {
  box-sizing: content-box | border-box;
}

တန်ဖိုးများ

စံထားချက်တန်ဖိုး: content-box.

နမူနာ . စံအပြုအမူ

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

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  margin-bottom: 10px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

နမူနာ . စံအပြုအမူ

လောလောဆယ် ဘလောက်နှစ်ခုစလုံးတွင် တူညီသောအမြင့်နှင့် အကျယ်ရှိသော်လည်း ဒုတိယဘလောက်တွင် 10px နယ်နိမိတ်မျဉ်း သတ်မှတ်ထားပြီး ပထမဘလောက်တွင် မရှိပါ။ ၎င်းတို့၏အရွယ်အစားများ မည်သို့ကွဲပြားသည်ကို ကြည့်ရှုပါ။

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

နမူနာ . စံအပြုအမူ

လောလောဆယ် ဒုတိယဘလောက်တွင် padding နှင့် 10px နယ်နိမိတ်မျဉ်း နှစ်ခုစလုံးရှိသည်။

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  border: 20px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

နမူနာ . border-box တန်ဖိုး

ဒုတိယအချက်အတွက် box-sizing ဂုဏ်သတ္တိ၏ border-box တန်ဖိုးကို ထည့်သွင်းကြည့်ပါမည်။ ယခုအခါ ပထမ နှင့် ဒုတိယ အချက် နှစ်ခုစလုံး၏ အရွယ်အစားများ တူညီသွားမည်ဖြစ်သည်။

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  box-sizing: border-box;
  padding: 50px;
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

ထပ်မံကြည့်ရှုရန်