Latest web development tutorials

حجم مربع CSS3

CSS3 box-sizing الملكية لضبط العرض والارتفاع سمات يحتوي الحشو (الحشو) والحدود (الحدود).

دعم المتصفح

الأرقام الواردة في الجدول تمثل أول متصفح لدعم رقم الإصدار الممتلكات.

مباشرة بعد متصفح عدد -webkit- أو بادئة محدد -moz-.

ممتلكات
مربع التحجيم 10.0
4.0 -webkit- 		ثمانية 29.0
2.0 -moz- 		5.1
3.1 -webkit- 		9.5

لا تستخدم خاصية التحجيم مربع CSS3

افتراضيا، وعرض وعنصر الحوسبة الطريقة الراقية على النحو التالي:

عرض (العرض) + الحشو (الحشو) + الحدود (الحدود) = عناصر العرض الفعلية

ارتفاع (الارتفاع) + الحشو (الحشو) + الحدود (الحدود) = الطول الفعلي للعنصر

وهذا يعني أننا عندما تعيين العنصر العرض / الارتفاع، ارتفاع عرض عنصر والعرض سيكون أكبر (بسبب العنصر الحدود مع الحشو وحساب عرض / ارتفاع في).

هذا هو مربع صغير (العرض هو 300px، هو الارتفاع 100px).

هذا هو مربع كبير (العرض هو 300px، هو الارتفاع 100px).

هذين <div> العنصر، على الرغم من أن العرض والارتفاع ضبط نفسه، ولكن حجم العرض الحقيقي غير مضمونة نظرا DIV2 الحشو محدد:

أمثلة

.div1 {
العرض: 300px؛
الطول: 100px؛
الحدود: 1PX صلبة زرقاء.
}

.div2 {
العرض: 300px؛
الطول: 100px؛
الحشو: 50px؛
الحدود: 1PX الصلبة الحمراء؛
}

محاولة »

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

وCSS3 box-sizing الملكية حلا جيدا لهذه المشكلة.

استخدام CSS3 تحجيم مربع الخاصية

CSS3 box-sizing تحتوي السمة الحشو (الحشو) والحدود (الحدود) في عرض وارتفاع عنصر.

إذا قمت بتعيين على عنصر box-sizing: border-box; الحشو (الحشو) والحدود (الحدود) كما يتم تضمين في العرض والارتفاع:

اثنين من شعبة هو الآن نفس الحجم!

هذا البرنامج التعليمي!

هنا يتم إضافة اثنين <div> العنصر box-sizing: border-box; خصائص مثال بسيط.

أمثلة

.div1 {
العرض: 300px؛
الطول: 100px؛
الحدود: 1PX صلبة زرقاء.
مربع التحجيم: مربع الحدود؛
}

.div2 {
العرض: 300px؛
الطول: 100px؛
الحشو: 50px؛
الحدود: 1PX الصلبة الحمراء؛
مربع التحجيم: مربع الحدود؛
}

محاولة »

انطلاقا من نتائج box-sizing: border-box; نتائج أفضل، بل هو أيضا الكثير من المطورين تحتاج إليها.

التعليمة البرمجية التالية يمكن ان يجعل جميع العناصر بطريقة أكثر سهولة لعرض الحجم. العديد من المتصفحات تدعم بالفعل box-sizing: border-box; (ولكن ليس كل شيء - وهذا هو السبب المدخلات والنص العناصر الواردة العرض: 100٪، وعرض آخر ليست هي نفسها).

جميع العناصر باستخدام شباك التحجيم هو أكثر أوصى:

أمثلة

* {
مربع التحجيم: مربع الحدود؛
}

محاولة »