CSS Box Model
نموذج العرض الصندوقي في لغة CSS
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Box Model
نموذج العرض الصندوقي في لغة CSS
</>
CSS Box Model
نموذج العرض الصندوقي في لغة CSS
- 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
إنشاء عنصر نصي
CSS Box Model create element
إنشاء عنصر نصي في صفحة الويب.
<p>The CSS box model</p>
</>
Add border to Element
إضافة إطار داخلي للعنصر
CSS Box Model Add border
إضافة إطار للعنصر عن طريق خاصية border.
p
{
border:red solid 1px;
}
</>
Add background color to Element
إضافة خلفية لون للعنصر
CSS Box Model Add background color
إضافة خلفية لون عن طريق background.
p
{
border:red solid 1px;
background:yellow;
}
</>
Add outline to Element
إضافة إطار خارجي للعنصر
CSS Box Model Add outline
إضافة إطار خارجي للعنصر عن طريق خاصية outline.
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
}
</>
Add padding to element
إضافة هامش داخلي للعنصر
CSS Box Model Add padding
إضافة هامش داخلي للعنصر عن طريق خاصية padding.
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
}
</>
Add margin to element
إضافة هامش خارجي للعنصر
CSS Box Model Add margin
إضافة هامش داخلي للعنصر عن طريق خاصية padding.
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
margin:20px;
}
</>
Add outline offset to element
إضافة مساحة بين الهامش الداخلي والهامش الخارجي للعنصر
CSS Box Model Add outline offset
إضافة هامش داخلي للعنصر عن طريق خاصية padding.
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
margin:20px;
outline-offset:15px;
}
</>
Add height to element
إضافة طول للعنصر
CSS Box Model Add height
إضافة هامش داخلي للعنصر عن طريق خاصية padding.
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
margin:20px;
outline-offset:15px;
height:100px;
}
</>
Add width to element
إضافة عرض للعنصر
CSS Box Model Add width
إضافة عرض للعنصر عن طريق خاصية width.
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
margin:20px;
outline-offset:15px;
height:100px;
width:50%;
}
مهم
</>
Center Element
توسيط العنصر داخل صفحة الويب
CSS Box Model center
توسيط العنصر عن طريق خاصية margin بقيمة auto.
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.
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
CSS two box model
توسيط العنصر عن طريق خاصية margin بقيمة auto.
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%;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
