CSS

CSS Box Sizing
خاصية box-sizing في لغة CSS

سوف تتعلم في هذا الدرس خاصية box-sizing في لغة CSS ووظيفيتها وكيفية استخدامها صفحة الويب وجميع القيم الخاصة بها.

التاريخ

31 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

6233

المواضيع

24
الشروحات chevron_left CSS Box Sizing chevron_left CSS
CSS Flex Box keyboard_arrow_down

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.

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;
}
مصطلحات الدرس
Box
Box

صندوق

Sizing
Sizing

تحجيم

Without
Without

بدون

Total
Total

إجمالي

Width
Width

عرض

Height
Height

ارتفاع

Text Area
Text Area

منطقة خاصة بالنص

Inputs
Inputs

حقول إدخال

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.