CSS3 مربع تحجيم
وCSS3 box-sizing الخاصية تسمح لنا أن تدرج في الحشو والحدود في العرض الكلي للعناصر مع الارتفاع.
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها -webkit- أو -moz- تحدد النسخة الأولى التي عملت مع بادئة.
| الملكية | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
دون CSS3 box-sizing الملكية
افتراضيا، يتم حساب العرض والارتفاع عنصر من هذا القبيل:
عرض + الحشو + الحدود = العرض الفعلي عنصر
ارتفاع + الحشو + الحدود = الارتفاع الفعلي عنصر
وهذا يعني: عند تعيين عرض / ارتفاع العنصر، عنصر غالبا ما تظهر أكبر مما كنت قد وضعت (لأن الحدود العنصر والحشو تضاف إلى تحديد العنصر العرض / الارتفاع).
ويبين الرسم التوضيحي التالي اثنين <div> العناصر مع العرض المحدد نفسه والارتفاع:
وهما <div> العناصر المذكورة أعلاه في نهاية المطاف مع أحجام مختلفة في النتيجة (لأن DIV2 والحشو تحديد):
مثال
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
} انها محاولة لنفسك » لذلك، لفترة طويلة ولم تحدد مطوري الويب قيمة العرض أصغر من أرادوا، لأنهم اضطروا إلى طرح من الحشو والحدود.
مع CSS3، و box-sizing الملكية يحل هذه المشكلة.
مع CSS3 box-sizing الملكية
وCSS3 box-sizing الخاصية تسمح لنا أن تدرج في الحشو والحدود في العرض الكلي للعناصر مع الارتفاع.
إذا قمت بتعيين box-sizing: border-box; على الحشو عنصر والحدود تم تضمينها في العرض والارتفاع:
هنا هو نفس المثال على النحو الوارد أعلاه، مع box-sizing: border-box; وأضاف أن كلا <div> عناصر هي:
مثال
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
} انها محاولة لنفسك » لأن النتيجة من استخدام box-sizing: border-box; هو أفضل من ذلك بكثير، العديد من المطورين يريدون كل العناصر على صفحاتها للعمل بهذه الطريقة.
يضمن رمز أدناه أن جميع العناصر الحجم بهذه الطريقة أكثر سهولة. العديد من المتصفحات بالفعل استخدام box-sizing: border-box; للعديد من عناصر النموذج (ولكن ليس كل شيء - وهذا هو السبب المدخلات والمناطق النص تبدو مختلفة في العرض: 100٪؛).
وبتطبيق ذلك على جميع العناصر غير آمنة والحكمة: