خاصية تغيير حجم الصندوق في CSS
مثال
قم بتضمين المساحة المتروكة والحد في إجمالي عرض العنصر وارتفاعه:
#example1 {
box-sizing: border-box;
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
box-sizing
تحدد الخاصية كيفية حساب العرض والارتفاع لعنصر ما: هل يجب أن يشتمل على مساحة متروكة وحدود أم لا .
القيمة الافتراضية: | مربع المحتوى |
---|---|
وارث: | رقم |
متحرك: | رقم. اقرأ عن animatable |
الإصدار: | CSS3 |
بناء جملة JavaScript: | الكائن .style.boxSizing = "مربع الحدود" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
تحدد الأرقام المتبوعة بـ -webkit- أو -moz- الإصدار الأول الذي يعمل مع بادئة.
Property | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
بنية CSS
box-sizing: content-box|border-box|initial|inherit;
قيم الملكية
Value | Description |
---|---|
content-box | Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included |
border-box | The width and height properties (and min/max properties) includes content, padding and border |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
مزيد من الأمثلة
مثال
حدد مربعين محددين جنبًا إلى جنب:
div
{
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
مثال
اضبط "حجم الصندوق العالمي":
* {
box-sizing: border-box;
}
الصفحات ذات الصلة
برنامج CSS التعليمي: CSS Box Sizing
مرجع HTML DOM: خاصية boxSizing