انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 48
دورة لغة CSS

نموذج العرض الصندوقي في لغة CSSCSS Box Model

سوف تتعلم في هذا الدرس كيف تُعرض العناصر علي المُتصفح وكل عنصر يُعرض داخل صندوق وكل صندوق يتكون من مجموعة مساحات يجب التعرف عليها قبل التعامل مع هذا الصندوق بلغة CSS.
ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
12
الأمثلة
12
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
4,562
محتوى الدرس
في هذا الدرس 12تصفّح المواضيع

CSS Box Model نموذج العرض الصندوقي في لغة CSS

Box Model نموذج العرض الصندوقي في لغة CSS وهي عرض كل عنصر HTML علي المتصفح علي شكل صندوق هذا الصندوق له مكونات فوق بعضها لبعض وتبدأ من content محتوي العنصر وتنتهي عند margin هذا الصندوق إما يظهر بكامل تفاصيلة أو بعضها علي حسب تحديد مساحة كل مكون علي المتصفح.
نموذج العرض الصندوقي في لغة CSS
مكونات صندوق box model علي المتصفح:

  • content بداية box model هو محتوي عنصر HTML سواء هذا المحتوي نصي أو صوره أو فيديو الخ.
  • padding أعلي المحتوي هو الهامش الداخلي وهي المساحة التي تكون بين content المحتوي وبين border الإطار الداخلي.
  • border إطار الزي يأتي بعد padding الهامش الداخلي.
  • outline offset المسافة بين border الإطار الداخلي outline والإطار الخارجي.
  • outline وهو الإطار الخارجي للعنصر وهو بعد border الإطار الداخلي.
  • margin وهي الهامش الخارجي للعنصر وهي الزي يلامس هوامش عناصر HTML الأخري المحيطة حولة.
  • height وهو طول العنصر الزي يتم ضبطة بواسطة CSS أو HTML.
  • width وهو عرض العنصر الزي يتم ضبطة بواسطة CSS أو HTML.

Create paragraph Element إنشاء عنصر نصي

سنقوم بإضافة عنصر <p> لكي نقوم بتجربة box model عليه عن إضافة بعض الخصائص بلغة CSS.
جرّب بنفسك

CSS Box Model create element

إنشاء عنصر نصي في صفحة الويب.

HTML 
<p>The CSS box model</p>
جرّب بنفسك

Add border to Element إضافة إطار داخلي للعنصر

سنقوم بإضافة إطار داخلي للعنصر عن طريق خاصية border بلغة CSS وهو الإطار الأحمر داخل حدود العنصر.
جرّب بنفسك

CSS Box Model Add border

إضافة إطار للعنصر عن طريق خاصية border.

HTML 
p
{
border:red solid 1px;
}
جرّب بنفسك

Add background color to Element إضافة خلفية لون للعنصر

إضافة خلفية لون للعنصر <p> عن طريق خاصية background في لغة CSS وهي الخلفية الصفراء بداخل العنصر.

CSS Box Model Add background color

إضافة خلفية لون عن طريق background.

جرّب بنفسك

CSS Box Model Add background color

إضافة خلفية لون عن طريق background.

HTML 
p
{
border:red solid 1px;
background:yellow;
}
جرّب بنفسك

Add outline to Element إضافة إطار خارجي للعنصر

سنقوم بإضافة إطار خارجي للعنصر عن طريق خاصية outline بلغة CSS وهو الإطار الأزرق خارج العنصر.

CSS Box Model Add outline

إضافة إطار خارجي للعنصر عن طريق خاصية outline.

جرّب بنفسك

CSS Box Model Add outline

إضافة إطار خارجي للعنصر عن طريق خاصية outline.

HTML 
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
}
جرّب بنفسك

Add padding to element إضافة هامش داخلي للعنصر

إضافة هامش داخلي للعنصر <p> عن طريق خاصية padding بلغة CSS وهي المساحة بين محتوي العنصر وبين الإطار الداخلي للعنصر.
جرّب بنفسك

CSS Box Model Add padding

إضافة هامش داخلي للعنصر عن طريق خاصية padding.

HTML 
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
}
جرّب بنفسك

Add margin to element إضافة هامش خارجي للعنصر

إضافة هامش خارجي للعنصر <p> عن طريق خاصية margin بلغة CSS وهو المساحة التي تكون خارج حدود العنصر وهي تلامس حدود العناصر الأخري.
جرّب بنفسك

CSS Box Model Add margin

إضافة هامش داخلي للعنصر عن طريق خاصية padding.

HTML 
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
margin:20px;
}
جرّب بنفسك

Add outline offset to element إضافة مساحة بين الهامش الداخلي والهامش الخارجي للعنصر

إضافة مساحة بين border الهامش الداخلي للعنصر <p> والهامش الخارجي outline عن طريق خاصية outline-offset بلغة CSS.
جرّب بنفسك

CSS Box Model Add outline offset

إضافة هامش داخلي للعنصر عن طريق خاصية padding.

HTML 
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
margin:20px;
outline-offset:15px;
}
جرّب بنفسك

Add height to element إضافة طول للعنصر

إضافة طول للعنصر <p>  عن طريق خاصية height بلغة CSS وهي طول content المحتوي.
جرّب بنفسك

CSS Box Model Add height

إضافة هامش داخلي للعنصر عن طريق خاصية padding.

HTML 
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
margin:20px;
outline-offset:15px;
height:100px;
}
جرّب بنفسك

Add width to element إضافة عرض للعنصر

إضافة عرض للعنصر <p>  عن طريق خاصية width بلغة CSS وهي عرض content المحتوي.
جرّب بنفسك

CSS Box Model Add width

إضافة عرض للعنصر عن طريق خاصية width.

HTML 
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
margin:20px;
outline-offset:15px;
height:100px;
width:50%;
}
جرّب بنفسك

Center Element توسيط العنصر داخل صفحة الويب

يمكن توسيط أي عنصر عن طريق خاصية margin-left وخاصية margin-right وتكون القيمة auto في لغة CSS.
جرّب بنفسك

CSS Box Model center

توسيط العنصر عن طريق خاصية margin بقيمة auto.

HTML 
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
margin:20px auto;
outline-offset:15px;
height:100px;
width:50%;
}
جرّب بنفسك

CSS Box Model center margin sides

توسيط العنصر عن طريق خاصية margin بقيمة auto.

HTML 
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
margin-top:20px;
margin-bottom:20px;
margin-left:auto;
margin-right:auto;
outline-offset:15px;
height:100px;
width:50%;
}
جرّب بنفسك

CSS two box model عنصرين لهم box model

يمكن توسيط أي عنصر عن طريق خاصية margin-left وخاصية margin-right وتكون القيمة auto في لغة CSS.
جرّب بنفسك

CSS two box model

توسيط العنصر عن طريق خاصية margin بقيمة auto.

HTML 
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
margin-top:20px;
margin-bottom:120px;
margin-left:auto;
margin-right:auto;
outline-offset:15px;
height:100px;
width:70%;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات9

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 9 مفهومةأول بطاقة، أول خطوة
01 Model قالب
للمراجعة
02 Box صندوق
للمراجعة
03 Elements عناصر
للمراجعة
04 Boxes صناديق
للمراجعة
05 Border حد
للمراجعة
06 Padding حشو
للمراجعة
07 Margin هامش
للمراجعة
08 Element عنصر
للمراجعة
09 Outline حدود عريضة خارجية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات2

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 2 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة
02 HTML HTML
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

1أسئلة 1أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي1 أسئلة تنتظرك
01

ما الذي توضحه خاصية Box Model ؟