تحجيم صندوق CSS

كيفية العمل مع Box Sizing في CSS

يتمثل السلوك الافتراضي للمتصفحات عند حساب عرض العنصر في تطبيق العرض والارتفاع المحسوبين على ملفمنطقة المحتوى، دون مراعاة الحشو والحدود والهامش.

ثبت أن هذا النهج معقد للغاية للعمل معه.

يمكنك تغيير هذا السلوك عن طريق تعيينbox-sizingمنشأه.

الbox-sizingالملكية هي مساعدة كبيرة. لها قيمتان:

  • border-box
  • content-box

content-boxهو الخيار الافتراضي ، الذي كان لدينا منذ زمن طويل من قبلbox-sizingأصبح شيئا.

border-boxهو الشيء الجديد والرائع الذي نبحث عنه. إذا قمت بتعيين ذلك على عنصر:

.my-div {
  box-sizing: border-box;
}

يتضمن حساب العرض والارتفاع المساحة المتروكة والحد. يتم ترك الهامش فقط ، وهو أمر معقول لأننا نرى ذلك في أذهاننا أيضًا كشيء منفصل: الهامش خارج الصندوق.

هذه الخاصية هي تغيير بسيط ولكن لها تأثير كبير. حتى أن CSS Tricks أعلنت أن ملفاليوم العالمي للتوعية حول حجم الصندوق، فقط أقول ، ويوصى بتطبيقه على كل عنصر في الصفحة ، خارج الصندوق ، مع هذا:

*, *:before, *:after {
  box-sizing: border-box;
}

تحميل مجانيكتيب CSS


المزيد من دروس css: