Box Model – نموذج الصندوق

كل عنصر في CSS يعتبر صندوق، وفهم مبدأ النموذج الصندوقي (BOX MODELING) سيفتح لك إمكانيات عديدة كترتيب العناصر ومحاذاتها مع بعضها البعض وإنشاء التصاميم المختلفة layouts.

Block vs. inline 

بعض العناصر في HTML تملك خاصية افتراضية by default 

 display:block; 

وبعض العناصر الأخرى تمتلك خاصية افتراضية

display:inline;

الفرق الجوهري هو أن الblock يمكنك تحديد العرض والطول له, أهم أمثلته الdiv, p, img، أما الinline فإنه يأخذ عرض وطول المحتوى الذي فيه ولا يمكن تعديله ليأخذ عرض وطول آخرين، أهم أمثلته عنصر span, anchor.

أجزاء الصندوق (4):

مربع المحتوى(Content): المنطقة التي يتم داخلها عرض المحتوى الخاص بك ، والتي يمكن تغيير حجمها باستخدام خصائص مثل العرض والارتفاع.

مربع الحشو(Padding): الحشو يكون حول المحتوى كمساحة بيضاء ؛ يمكن التحكم في حجمها باستخدام الحشوة(Padding) .

مربع الحدود(Border): مربع الحدود يكون حول المحتوى والحشوة. يمكن التحكم في حجمه وأسلوبه باستخدام الحدود والخصائص ذات الصلة.

مربع الهامش(Margin): الهامش هو الطبقة الخارجية ، حيث يلف المحتوى والحشو والحدود كمسافة بيضاء بين هذا المربع والعناصر الأخرى. يمكن التحكم في حجمها باستخدام الهامش والخصائص ذات الصلة.

المراجع:

 MDN

W3School

 

The post Box Model – نموذج الصندوق appeared first on مدونة برمج.

اترك ردّاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *