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 අගය

දෙවන මූලද්‍රව්‍යයට border-box අගය එකතු කරමු box-sizing ගුණය සඳහා. දැන් මාන පළමු සහ දෙවන මූලද්‍රව්‍ය දෙකම සමාන වේ:

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;
}

Результат:

මෙයද බලන්න