في هذا الدرس 3تصفّح المواضيع
CSS box sizing
خاصية box-sizing في لغة CSS
CSS box sizing خاصية box-sizing في لغة CSS
تستخدم خاصية box-sizing في لغة CSS لتسمح بحجم padding وحجمborder يكون من إجمالي طول وعرض العنصر لان في وضعة الطبيعي حجم padding وحجمborder يزيد عن حجم العنصر.
حجم العنصر بدون خاصية box-sizing:
- حجم عرض العنصر = 200px + حجم border الإطار 5px + حجم padding هو 10px = إجمالي العرض هو 200+5+10 = 215px.
- حجم طول العنصر = 300px + حجم border الإطار 5px + حجم padding هو 10px = إجمالي العرض هو 300+5+10 = 315px.
حجم العنصر مع خاصية box-sizing:
- حجم عرض العنصر = 200px + حجم border الإطار 5px + حجم padding هو 10px = إجمالي العرض هو 200px فقط.
- حجم طول العنصر = 300px + حجم border الإطار 5px + حجم padding هو 10px = إجمالي العرض هو 300px فقط.
قيم خاصية box-sizing في لغة CSS:
- content-box يتمدد حجم (طول وعرض) العنصر عندما يتم إضافة border وإضافة padding له يزيد حجم عرض وحجم الطول عن الحجم المحدد له في خاصية height وعرض العنصر المحدد له خاصية width وهي القيمة الأفتراضية.
- border-box تستخدم خاصية box-sizing مع القيمة border-box لكي لا يتمدد حجم (طول وعرض) العنصر عندما يتم إضافة border وإضافة padding له ولا يزيد حجم عرض وحجم الطول عن الحجم المحدد له في خاصية height وعرض العنصر المحدد له خاصية width.
without box-sizing
يدون خاصية box-sizing فالعنصر يزيد عن حجم العرض.
with box-sizing
لا يزيد حجم العنصر مع padding و border يصبح الطول والعرض شامل جميع المساحة.
CSS box-sizing Syntax
طريقة كتابة خاصية box-sizing في لغة CSS.
CSS box-sizing Values
قيم خاصية box-sizing في لغة CSS.
CSS box sizing content box
خاصية box-sizing مع قمية content-box في لغة CSS
CSS box sizing content box خاصية box-sizing مع قمية content-box في لغة CSS
تستخدم خاصية box-sizing مع القيمة content-box لكي يتمدد حجم (طول وعرض) العنصر عندما يتم إضافة border وإضافة padding له يزيد حجم عرض وحجم الطول عن الحجم المحدد له في خاصية height وخاصية width وهي القيمة الأفتراضية.
CSS box sizing content box
خاصية box-sizing معالقيمة content-box في لغة CSS.
.item
{
background-color: rgba(255, 255, 255, 0.8);
border: 2px solid rgba(0, 0, 0, 0.8);
padding: 20px;
width:300px;
height:200px;
}
CSS box sizing border box
خاصية box-sizing مع قمية border-box في لغة CSS
CSS box sizing border box خاصية box-sizing مع قمية border-box في لغة CSS
تستخدم خاصية box-sizing مع القيمة border-box لكي لا يتمدد حجم (طول وعرض) العنصر عندما يتم إضافة border وإضافة padding له ولا يزيد حجم عرض وحجم الطول عن الحجم المحدد له في خاصية height وعرض العنصر المحدد له خاصية width.
CSS box sizing border box
خاصية box-sizing معالقيمة border-box في لغة CSS.
.item
{
background-color: rgba(255, 255, 255, 0.8);
border: 2px solid rgba(0, 0, 0, 0.8);
padding: 20px;
width:300px;
height:200px;
box-sizing: border-box;
}سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات11
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Box صندوق
- للمراجعة
- 02 Sizing تحجيم
- للمراجعة
- 03 Without بدون
- للمراجعة
- 04 Total إجمالي
- للمراجعة
- 05 Width عرض
- للمراجعة
- 06 Padding حشو
- للمراجعة
- 07 Border حد
- للمراجعة
- 08 Height ارتفاع
- للمراجعة
- 09 Text Area منطقة خاصة بالنص
- للمراجعة
- 10 Inputs حقول إدخال
- للمراجعة
- 11 With مع
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات1
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي3 أسئلة تنتظرك ＋
تسمح لنا خاصية ...................... في CSS بتضمين المساحة المتروكة والحد في العرض والارتفاع الكليين للعنصر.
____