() translation by (you can also view the original English article)
تنص معايير 'css' على أنه يجب تطبيق الحدود (borders) والحشو (padding) أعلى العرض المحدد لعنصر. على هذا النحو، إذا كان الديف مساحته 200 بكسل، وقمت باضافة 40 بكسل قيمة الحدود والحشو، سوف يكون إجمالي العرض 240 بكسل. وهذا يجعل الامر مفهوماً. ومع ذلك، فإن 'إنترنت إكسبلور' فعلت الأمور بشكل مختلف. لقد اعتمدوا نموذجياً حيث الحد الأقصى للعرض هو ما قمت انت بتحديده. ثم يتم وضع الحدود (borders) والحشو (padding) في هذا العرض، مما يقلل من مساحة المحتوى. ونتيجة لذلك، لا يتجاوز عرض العنصر مطلقاً عرض ال ٢٠٠ بكسل.
ونحن نعمل في الغالب مع تخطيطات حساسة للغاية، حيث حتى إضافة الحدود 1 بكسل يمكنها تحطيم التصميم، وأتساءل: هل 'إنترنت إكسبلور' على حق؟
حجم المربع
"يتم استخدام خاصية حجم الاطار (Box Sizing) بال 'CSS' لتغيير نموذج اطار 'CSS' الافتراضي المستخدم لحساب عرض وارتفاعات العناصر. ومن الممكن استخدام هذه الخاصية لمحاكاة سلوك المتصفحات التي لا تدعم بشكل صحيح مواصفات نموذج اطار ال CSS. "
تسجيل مرئي للشاشة بالكامل
وهذا يعني أنه إذا كان عليك أن تقرر أنك تريد محاكاة التفسير الأصلي 'إنترنيت إكسبلورر' لنموذج الإطار، يمكنك ذلك.إن القيمة الافتراضية لحجم الإطار هي "إطار المحتوى". وهذا يعني ببساطة أن العرض والارتفاع لعنصر لا يتضمنان الحدود والحشو (أو الهوامش).
من خلال تغيير هذه القيمة إلى "مربع-الحدود border-box"، فإن قيم العرض والارتفاع تشمل الحدود والحشو.
1 |
|
2 |
#box { |
3 |
width: 200px; |
4 |
height: 200px; |
5 |
background: red; |
6 |
|
7 |
padding: 10px; |
8 |
border: 10px solid black; |
9 |
|
10 |
-moz-box-sizing: border-box; |
11 |
-webkit-box-sizing: border-box; |
12 |
box-sizing: border-box; |
13 |
}
|
نظرا لأننا أعلنا عن تحديد حجم الإطار بقيمة "مربع-الحدود border-box"، فسيكون العرض النهائي لعنصر ' #box '، الذي تمت الإشارة إليه أعلاه ٢٠٠ بكسل.
خصوصا للتخطيطات المنتشرة ، والتي يمكن أن توفر لك الكثير من الصداع! ولكن بالرغم من ذالك، ما زلت متردد . ما هي أفكارك حول تفسير 'إنترنيت إكسبلورر' للنموذج المربع (box model)؟
