خصائص Style boxSizing

التعريف والاستخدام

boxSizing الخصائص تسمح لك بتحديد كيفية تعريف العنصر الخاص الذي يطابق منطقة معينة.

على سبيل المثال، إذا كنت بحاجة إلى وضع إثنين من الصناديق المحددة بالحدود بشكل متوازي، يمكنك تعيين box-sizing إلى "border-box". هذا يجعل المتصفح يظهر صناديق محددة بالعرض والارتفاع المحددين ويضيف الحدود والهوامش إلى الصندوق.

يرجى الرجوع أيضًا إلى:

دليل CSS:خصائص box-sizing

مثال

تغيير خصائص boxSizing:

document.getElementById("myDIV").style.boxSizing = "border-box";

تجربة شخصية

النحو

استرداد خصائص boxSizing:

الجسم.style.boxSizing

تعيين خصائص boxSizing:

الجسم.style.boxSizing = "content-box|border-box|initial|inherit"

قيمة الخصائص

القيمة وصف
content-box

القيمة الافتراضية. هذا هو سلوك العرض والارتفاع المحددين المحدد من قبل CSS2.1.

يطبق العرض والارتفاع المحددين (وخصائص min/max) على عرض صندوق المحتوى وارتفاعه.

يتم تخطيط وتنفيذ الهوامش الداخلية والحدود للعنصر خارج عرض النص وارتفاع النص المحددين.
border-box

يحدد العرض والارتفاع المحددين للعنصر صندوق الحدود للعنصر.

هذا يعني أن أي هوامش داخليه وخطوط حدودية معينة للعنصر ستتم رسمها داخل العرض والارتفاع المحددين.

يمكن الحصول على عرض النص وارتفاع النص عن طريق طرح الهوامش والهوامش من العرض والارتفاع المحددين.
initial ضبط هذا الخصائص إلى قيمته الافتراضية. يرجى الرجوع إلى initial.
inherit يرث هذا الخصائص من عنصر الأب. يرجى الرجوع إلى inherit.

تفاصيل التقنية

القيمة الافتراضية: content-box
القيمة المطلقة: الخط النصي، يمثل خصائص box-sizing.
إصدار CSS: CSS3

دعم المتصفحات

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم