စီစဥ်ကွန်ုပ်စံ Box Sizing

စီစဥ်ကွန်ုပ်စံ Box Sizing

CSS box-sizing အစိတ်ချွန်း ပါဝင်သည်။

အစိတ်ချွန်း အား

လုံးဝ အစိတ်ချွန်း အား

  • width + padding + border = အကျယ်း အရွယ်အစား အကျယ်း
  • height + padding + border = အကျယ်း အရွယ်အစား အကျယ်း

အမှတ်ပြုထားသည်: အသုံးပြုထားသော အစိတ်ချွန်း အရွယ်အစား/အမြင့် အား အစိတ်ချွန်း နှင့် ပတ်ဝန်းကျင်း ပါဝင်သည် (အစိတ်ချွန်း နှင့် ပတ်ဝန်းကျင်း ပါဝင်သည်)။

အောက်ရှိ အကျယ်း အကျယ်း အစိတ်ချွန်း နှစ်ခု ကို ပြထားသည်

အကျယ်း အရွယ်အစား အတူတူပါသည်
（အကျယ်း အား 300px ဖြစ်ပြီး အမြင့် 100px ဖြစ်သည်）。
အကျယ်း အရွယ်အစား အတူတူပါသည်
（အကျယ်း အားလုံး အစိတ်ချွန်း အား 300px ဖြစ်ပြီး အမြင့် 100px ဖြစ်သည်）。

အမှတ်ပြုထားသော နှစ်ခုစလုံး <div> အကျယ်း အရွယ်အစား အမျိုးမျိုးပါသည်(အကျယ်း2 က အစိတ်ချွန်း ကို ကိုးကားထားသည်)

实例

.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 အစိတ်ချွန်း အား

box-sizing အစိတ်ချွန်း ပါဝင်သည်။

အစိတ်ချွန်း ပြင်ဆင်ခဲ့သော အစိတ်ချွန်း အား box-sizing: border-box;အစိတ်ချွန်း နှင့် ပတ်ဝန်းကျင်း ပါဝင်သည်။

ယခု နှစ်ခုစလုံး div အကျယ်း အရွယ်အစားအတူတူပါသည်!
Hooray!

အမှတ်ပြုထားသော အကျယ်း နှစ်ခု တူညီသည်။ နှစ်ခုစလုံး <div> အကျယ်း တွင် အစိတ်ချွန်း နှင့် ပတ်ဝန်းကျင်း အသုံးပြုပါသည် box-sizing: border-box;：

实例

.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; 的效果如此之好，许多开发人员希望页面上的所有元素都能够以这种方式工作。

下面的代码能够确保以这种更直观的方式调整所有元素的大小。许多浏览器已经在对许多表单元素使用 box-sizing: border-box;（但并非全部 - 这就是为什么 input 和 textarea 在 width: 100%; 时看起来不同）。

将其应用于所有元素是安全且明智的：

实例

* {
  box-sizing: border-box;
}

亲自试一试

CSS Box Sizing 属性

属性 描述
box-sizing 定义元素宽度和高度的计算方式：它们是否应包含内边距（padding）和边框。