CSS Box Sizing
CSS Box Sizing
CSS box-sizingပိုင်ဆိုင်မှုသည် ကျွန်ုပ်တို့အား ဒြပ်စင်တစ်ခု၏ စုစုပေါင်းအကျယ်နှင့် အမြင့်တွင် padding နှင့် border တို့ကို ထည့်သွင်းနိုင်စေပါသည်။
CSS box-sizing Property မပါတဲ့
ပုံမှန်အားဖြင့်၊ ဒြပ်စင်တစ်ခု၏ အကျယ်နှင့် အမြင့်ကို ဤကဲ့သို့ တွက်ချက်သည်-
width + padding + border = element တစ်ခုရဲ့ တကယ့် width
အမြင့် + padding + border = element တစ်ခုရဲ့ တကယ့်အမြင့်
ဆိုလိုသည်မှာ- ဒြပ်စင်တစ်ခု၏ အကျယ်/အမြင့်ကို သင်သတ်မှတ်သောအခါ၊ ဒြပ်စင်သည် သင်သတ်မှတ်ထားသည်ထက် ပိုကြီးနေတတ်သည်။
အောက်ပါပုံဥပမာတွင် သတ်မှတ်ထားသော အကျယ်နှင့် အမြင့်တူညီသော <div> ဒြပ်စင်နှစ်ခုကို ပြသသည်-
အထက်ဖော်ပြပါ <div> ဒြပ်စင်နှစ်ခုသည် ရလဒ်တွင် မတူညီသောအရွယ်အစားများဖြင့် အဆုံးသတ်သည် (div2 တွင် အကွက်တစ်ခုသတ်မှတ်ထားသောကြောင့်)။
ဥပမာ
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
ပိုင်ဆိုင်မှု က box-sizingဒီပြဿနာကို ဖြေရှင်းပေးတယ်။
CSS box-sizing Property ဖြင့်
ပိုင်ဆိုင်မှု သည် box-sizingကျွန်ုပ်တို့အား ဒြပ်စင်တစ်ခု၏ စုစုပေါင်း အကျယ်နှင့် အမြင့်တွင် padding နှင့် border ကို ထည့်သွင်းနိုင်စေပါသည်။
ဒြပ်စင်တစ်ခုပေါ်တွင် သင်သတ်မှတ်ပါက box-sizing: border-box;၊ အကွက်နှင့် ဘောင်များကို အကျယ်နှင့် အမြင့်တွင် ထည့်သွင်းသည်-
ဤသည်မှာ box-sizing: border-box;
<div> ဒြပ်စင်နှစ်ခုလုံးကို ပေါင်းထည့်ခြင်းဖြင့် အထက်ဖော်ပြပါကဲ့သို့ တူညီသော ဥပမာဖြစ်ပါသည်။
ဥပမာ
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
အသုံးပြုခြင်း၏ရလဒ် box-sizing: border-box;သည် အလွန်ကောင်းမွန်သောကြောင့်၊ developer အများအပြားသည် ၎င်းတို့၏စာမျက်နှာရှိ အစိတ်အပိုင်းအားလုံးကို ဤနည်းဖြင့် လုပ်ဆောင်စေလိုပါသည်။
အောက်ဖော်ပြပါကုဒ်သည် အစိတ်အပိုင်းအားလုံးကို ဤပို၍နားလည်သဘောပေါက်သည့်နည်းလမ်းဖြင့် အရွယ်အစားရှိကြောင်း သေချာစေသည်။ ဘရောက်ဆာများစွာသည် ပုံစံဒြပ်စင်များစွာအတွက် အသုံးပြုထားပြီးဖြစ်သည် box-sizing: border-box;(သို့သော်အားလုံးမဟုတ်ပါ - ထို့ကြောင့် ထည့်သွင်းမှုများနှင့် စာသားနေရာများသည် အကျယ်အားဖြင့် 100% ကွဲပြားသည်;)။
ဤအရာအားလုံးကို ဒြပ်စင်များထံ အသုံးချခြင်းသည် ဘေးကင်းပြီး ပညာရှိဖြစ်သည်-
ဥပမာ
* {
box-sizing: border-box;
}
CSS Box Sizing Property
| Property | Description |
|---|---|
| box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |