مربع النمطحجم الممتلكات
مثال
تغيير خاصية boxSizing:
document.getElementById("myDIV").style.boxSizing = "border-box";
التعريف والاستخدام
تتيح لك خاصية boxSizing تحديد عناصر معينة لتناسب منطقة بطريقة معينة.
على سبيل المثال ، إذا كنت تريد صندوقين محددين جنبًا إلى جنب ، فيمكن تحقيق ذلك من خلال إعداد boxSizing إلى "border-box". يؤدي هذا إلى إجبار المستعرض على عرض المربع بالعرض والارتفاع المحددين ، ووضع الحدود والحشو داخل المربع.
دعم المتصفح
Property | |||||
---|---|---|---|---|---|
boxSizing | Yes | Yes | Yes | Yes | Yes |
بناء الجملة
إعادة الصندوقحجم الخاصية:
object.style.boxSizing
قم بتعيين خاصية boxSizing:
object.style.boxSizing = "content-box|border-box|initial|inherit"
قيم الملكية
Value | Description |
---|---|
content-box | Default value. This is the behavior of width and height as specified by CSS2.1. The specified width and height (and min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height |
border-box | The specified width and height (and min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified 'width' and 'height' properties |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
تفاصيل تقنية
القيمة الافتراضية: | مربع المحتوى |
---|---|
قيمة الإرجاع: | سلسلة ، تمثل خاصية تحجيم المربع لعنصر |
إصدار CSS | CSS3 |
الصفحات ذات الصلة
مرجع CSS: خاصية box-sizing
❮ نمط الكائن