CSS Box Sizing
خاصية box-sizing في لغة CSS
سوف تتعلم في هذا الدرس خاصية box-sizing في لغة CSS ووظيفيتها وكيفية استخدامها صفحة الويب وجميع القيم الخاصة بها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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 فقط.
- 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.
box-sizing:value;
CSS box-sizing Values
قيم خاصية box-sizing في لغة CSS.
box-sizing:content-box|border-box|initial|inherit;
</>
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
تستخدم خاصية 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;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
