نظرة على CSS3 Box-التحجيم
منذ وقت ليس ببعيد ، عندما نخلق أ صندوق في صفحة ويب ، دعنا نقول مع شعبة, نحدد 100px لكل من العرض والطول ، تليها حشوة إلى عن على 10px وحدود حول 10px كذلك.
div عرض: 100 بكسل ؛ الارتفاع: 100 بكسل ؛ الحشو: 10px. الحدود: 10px الصلبة #eaeaea.
ستقوم المتصفحات بتوسيع حجم الصندوق إلى 140 بكسل ، حيث يتكون هذا المبلغ 140 بكسل من إجمالي العرض / الارتفاع من إضافة حشوة و ال الحدود على النحو التالي؛ 100px [العرض / الارتفاع] + (2 × 10px [padding]) + (2 × 10px [حد]).
ومع ذلك ، في بعض الأحيان هذه النتيجة ليست ما نتوقعه أن يكون. في بعض الأحيان ، نحن بحاجة إلى أن يكون الصندوق دائمًا 100px بغض النظر عن الحشوة أو الحدود المضافة.
للتغلب على هذه المشكلة المتكررة عند إنشاء تخطيط صفحة الويب ، يمكننا استخدام CSS3 مربع التحجيم الملكية للسيطرة على كيفية نموذج مربع CSS يجب أن تعمل في المتصفحات.
باستخدام مربع التحجيم
ال مربع التحجيم الخاصية لها خياران القيمة ، أولا محتوى الصندوق. وهي القيمة الافتراضية ، عند استخدام هذه القيمة ، سيتصرف طراز الصندوق كما ذكرنا أعلاه.
والثاني هو صندوق الحدود, حيث سيتم حساب حجم المربع عن طريق استبدال حجم المحتوى المحدد مع الحشو والحدود المضافة.
div عرض: 100 بكسل ؛ الارتفاع: 100 بكسل ؛ الحشو: 10px. الحدود: 10px الصلبة #eaeaea. التحجيم مربع: الحدود مربع. التحجيم مربع: / * Firefox 1-3 * / -webkit-box-sizing: border-box؛ / * Safari * /
على سبيل المثال ، عندما يكون لدينا مربع مثل ما وصفناه أعلاه (100 بكسل مربع مع 10 بكسل للحشو والحدود) ، سينخفض حجم المحتوى إلى 60px, ويظل الحجم الإجمالي للمربع 100px, حيث يمكن وصف معادلة الطرح على النحو التالي ؛ 100px [العرض / الارتفاع] - ((2 × 10px [padding]) + (2 × 10px [حد])).
- عرض
- تحميل المصدر
دعم المتصفح
ال مربع التحجيم الملكية هي معتمد في جميع المتصفحات. Firefox 3.6+ و Safari 3 و Opera 8.5+ و Internet Explorer 8 والإصدارات الأحدث.
لذلك ، إذا كنت تعرف أن معظم زوار موقعك لن يستخدموا إصدارات Internet Explorer أدناه 8 ، فيمكنك استخدام هذه التوصية المفيدة (بفضل Paul Irish).
* box-sizing: border-box؛ التحجيم مربع: / * Firefox 1-3 * / -webkit-box-sizing: border-box؛ / * Safari * /
سيتم تطبيق المقتطف أعلاه مربع التحجيم خاصية لجميع العناصر على صفحة الويب الخاصة بك.
مثال
في هذا القسم ، سنعرض لك مثالًا واقعًا على كيفية الاستفادة من هذا مربع التحجيم خاصية. سننشئ تنقلًا بسيطًا ، استنادًا إلى ترميز HTML أدناه ، مع وجود خمسة روابط قائمة فيه.
ثم ، سنضيف بعض الأساليب الزخرفية. مثل ، قم بتعيين التنقل إصلاح عرض ل 500px و عرض الرابط لكل 100 بكسل, ثم قم بتضمين عنصر القائمة ، وإعطاء خلفيات مختلفة لكل قائمة ارتباط ، حتى تتمكن من رؤية الفرق بينهما.
nav width: 500px؛ الهامش: 50px auto 0؛ الارتفاع: 50 بكسل ؛ nav ul padding: 0؛ الهامش: 0 nav li float: left؛ انتقل إلى display: inline-block؛ العرض: 100 بكسل ؛ الارتفاع: 100 ٪ ؛ لون الخلفية: #ccc؛ اللون: # 555 ؛ زخرفة النص: لا شيء ؛ font-family: Arial، sans-serif؛ حجم الخط: 12pt ؛ ارتفاع الخط: 300 ٪ ؛ محاذاة النص: المركز ؛ انتقل إلى display: inline-block؛ العرض: 100 بكسل ؛ الارتفاع: 100 ٪ ؛ اللون: # 555 ؛ زخرفة النص: لا شيء ؛ font-family: Arial، sans-serif؛ nav li: nth-child (1) a background-color: # E9E9E9؛ الحدود اليسرى: 0؛ nav li: nth-child (2) a background-color: # E4E4E4؛ nav li: nth-child (3) a background-color: #DFDFDF؛ nav li: nth-child (4) a background-color: # D9D9D9؛ nav li: nth-child (5) a background-color: # D4D4D4؛ الحدود اليمنى: 0؛
في هذه المرحلة ، يبدو التنقل لدينا طبيعيًا.
ومع ذلك ، ستحدث المشكلة عندما نضيف حدودًا يسارًا أو يمينًا إلى قائمة الارتباط.
انتقل إلى border-left: 1px solid #aaa؛ الحدود اليمنى: 1px solid # f3f3f3؛
سوف تفيض القائمة إلى الأسفل ، حيث لم يعد عرض الرابط 100px. هي عليه الان 102px, مما تسبب في العرض الكلي للملاحة 10px أطول ثم حددنا أعلاه (500px).
للتغلب على هذه المشكلة ، نحتاج إلى تطبيق مربع التحجيم الممتلكات ، على النحو التالي:
انتقل إلى border-left: 1px solid #aaa؛ الحدود اليمنى: 1px solid # f3f3f3؛ التحجيم مربع: الحدود مربع. التحجيم مربع: -webkit-box-التحجيم: مربع الحدود ؛
- عرض
- تحميل المصدر
قراءة متعمقة
وأخيراً ، إذا كنت من النوع المغامر ، وتريد البحث في هذا الموضوع بشكل أعمق ، فقد قمنا بتجميع بعض المراجع المحددة لك:
- فهم نموذج صندوق المغلق - جمهورية التقنية
- تحجيم مربع في فايرفوكس - BugZilla
- التحجيم مربع FTW - بول الأيرلندية
