Theme
Primary Color
أكاديمية الزيرو

الدرس 32

حساب حجم العنصر باستخدام Box Model و box-sizing

معنى المصطلحات

المعنىStand ForName
أجزاء صندوق العنصر من محتوى ومسافة داخلية وحد ومسافة خارجيةBox Model
طريقة حساب العرض والارتفاعbox-sizing
الأبعاد المكتوبة تخص المحتوىcontent-box
الأبعاد المكتوبة تشمل المحتوى والمسافة الداخلية والحدborder-box

لما تكتب width: 300px وتضيف padding وحدود ممكن تلاقي العنصر أعرض من 300 بكسل خلينا نحسبه بنفسنا

أجزاء العنصر

من جوه لبره عندنا المحتوى وبعده padding وبعده border وبعده margin 

المسافة الخارجية مش جزء من الخلفية ولا من عرض صندوق الحدود

الحساب باستخدام content-box

<div class="box">Measure This Box</div>
.box {
  box-sizing: content-box;
  width: 300px;
  height: 100px;
  padding: 20px;
  border: 5px solid blue;
  margin: 10px;
  background-color: #eee;
}

عرض المحتوى 300 بكسل 

نضيف له 20 يمين و 20 شمال الخاصين بال Padding 

ثم 5 للحد اليمين و 5 للشمال الي هو ال Border 

فيبقى العرض لحد نهاية الحدود 350 بكسل

ال margin خارج الحساب ده

Width: 300 + 20 + 20 + 5 + 5 = 350px
Height: 100 + 20 + 20 + 5 + 5 = 150px

الحساب باستخدام border-box

بدل قيمة box-sizing فقط وسيب باقي المثال زي ما هو

box-sizing: border-box;

دلوقتي العرض 300 بكسل شامل padding والحدود 

Content Width: 300px
Content Height: 100px

ال margin لسه خارج العرض والارتفاع في الطريقتين 

وال outline مش بتدخل في الحساب

شوف الحساب في المتصفح

اضغط كليك يمين على العنصر واختار Inspect ومن Computed 

دور على رسم Box Model هتشوف المحتوى والمسافات والحدود بقيمهم

جرب بنفسك

خلي العرض 240px وال padding يساوي 15px والحد 2px 

احسب العرض مع content-box ثم border-box وقارن بالمتصفح

آخر تعديل للدرس: