CSS Box Sizing

CSS Box Sizing

CSS box-sizing 属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框。

假如不指定 CSS box-sizing 属性

默认情况下，元素的宽度和高度是这样计算的：

  • width + padding + border = 元素的实际宽度
  • height + padding + border = 元素的实际高度

这意味着：当您设置元素的宽度/高度时，该元素通常看起来比您设置的更大（因为元素的边框和内边距已被添加到元素的指定宽度/高度中）。

下图展示了两个有相同指定宽度和高度的

元素：

这个 div 较小
（宽度为 300px，高度为 100px）。
这个 div 更大
（宽度也为 300px，高度为 100px）。

上面的两个

元素在最终结果中呈现出不同的尺寸（因为 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 属性

box-sizing 属性允许我们在元素的总宽度和高度中包括内边距和边框。

ਜੇਕਰ ਇਲੈਕਟ੍ਰੌਨ ਉੱਤੇ ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਸੈੱਟ ਕੀਤੀ ਗਈ ਹੈ box-sizing: border-box;ਤਾਂ ਚੌਡਾਈ ਅਤੇ ਉਚਾਈ ਪੈਡਿੰਗ ਅਤੇ border ਨੂੰ ਸ਼ਾਮਲ ਕਰਦੀਆਂ ਹੋਵੇਗੀ:

ਹੁਣ ਦੋਵੇਂ div ਦਾ ਆਕਾਰ ਸਮਾਨ ਹੈ!
Hooray!

ਇਹ ਉਦਾਹਰਣ ਉੱਪਰਲੇ ਉਦਾਹਰਣ ਨਾਲ ਸਮਾਨ ਹੈ, ਦੋਵੇਂ <div> ਅੰਗ ਨੂੰ border ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ 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) اور فریم (border) کا شامل ہونا چاہیئے یا نہیں。