قاعدة الأبعاد border-box | التطبيع القياسي Reboot في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

في نموذج الصندوق التقليدي القديم content-box، إذا منحت عنصراً عرضاً قدره 50% ثم أضفت له حشواً داخلياً أو إطاراً، ازداد عرضه الفعلي عن النصف وانكسرت الأعمدة المتجاورة فوراً. تعالج طبقة Reboot هذه المشكلة من جذورها بفرض القاعدة الشاملة box-sizing: border-box على كافة العناصر والعناصر الزائفة ::before و ::after.

بفضل هذه القاعدة، إذا حددت عرض صندوق بـ 220px وأضفت حشواً بـ 14px وإطاراً بـ 4px، يبقى العرض الكلي الخارجي للصندوق مساوياً لـ 220px بالضبط دون زيادة بكسل واحد!

الصف 2 كود برمجي

HTML

<div class="container">
  <div id="box" class="sizing-compare">
    Declared width: 220px
  </div>
  <p id="out"></p>
</div>
<script>
  const w = document.getElementById('box').offsetWidth;
  document.getElementById('out').textContent = w + 'px';
</script>

جرّب بنفسك

الصف 3 ملاحظة هامة

Global Border Box Sizing قاعدة الأبعاد border-box

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (التطبيع القياسي Reboot في بوتستراب 5)