CSS3 box-sizing Property

تحديد أن <div> العناصر يجب أن يكون الحشو والحدود المدرجة في العرض الكلي للعنصر والارتفاع:

div {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

أكثر "Try it Yourself" الأمثلة أدناه.

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

يتم استخدام الخاصية تحجيم مربع لتخبر المتصفح ما خصائص التحجيم (width and height) ينبغي أن تشمل.

ينبغي أن تشمل مربع الحدود؟ أو مجرد مربع المحتوى (التي هي القيمة الافتراضية من العرض والارتفاع خصائص)؟

القيمة الافتراضية:	content-box
وارث:	no
Animatable:	no. Read about animatable
الإصدار:	CSS3
جافا سكريبت بناء الجملة:	object .style.boxSizing="border-box" Try it

الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.

أرقام تليها -webkit- أو -moz- تحدد النسخة الأولى التي عملت مع بادئة.

خاصية
box-sizing	10.0 4.0 -webkit-	ثمانية	29.0 2.0 -moz-	5.1 3.2 -webkit-	9.5

box-sizing: content-box|border-box|initial|inherit;

القيمة	وصف
content-box	افتراضي. خصائص العرض والارتفاع (and min/max properties) تشمل فقط المحتوى. الحدود، لا يتم تضمين الحشو، أو الهامش
border-box	خصائص العرض والارتفاع (and min/max properties) تتضمن محتوى، الحشو والحدود، ولكن ليس على الهامش
initial	تحدد هذه الخاصية إلى قيمته الافتراضية. قرأت عن الأولي
inherit	يرث هذه الخاصية من عنصر الأم. قراءة حول وراثة

تحديد اثنين تحدها صناديق جنبا إلى جنب:

div {
    box-sizing: border-box;
    width: 50%;
    float: left;
}

CSS3 البرنامج التعليمي: CSS3 مربع تحجيم

HTML DOM المرجع boxSizing property