شرح نموذج صندوق CSS بأمثلة

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

ما هو نموذج مربع CSS؟

نموذج مربع CSS هو معيار تم إنشاؤه بواسطة اتحاد شبكة ويب العالمية. يصف جميع العناصر في مستند HTML على أنها مربعات مستطيلة بأبعادها الخاصة. تحتوي هذه المربعات على منطقة محتوى والهامش المحيط والحدود ومساحات الحشو الاختيارية. لذا ، دعنا نستكشف أجزاء مربع CSS.

دعنا نكشف النقاب عن الطبقات الأربع لنموذج مربع CSS.

الطبقة الأولى: المحتوى

تحتوي منطقة المحتوى على المحتوى الرئيسي للعنصر الذي يمكن أن يكون صورة أو نصًا أو أي شكل من أشكال محتوى الوسائط. يمكنك تعديل أبعاد العناصر على مستوى الكتلة باستخدام ارتفاع و العرض الخصائص.

الطبقة الثانية: الحشو

المساحة المتروكة هي المسافة بين مربع المحتوى ومربع حدوده. على الرغم من أنها تدور حول المحتوى الخاص بك كمسافة بيضاء ، يمكنك استخدام لون الخلفية لتصور الفرق. يمكنك تطبيق

أعلى الحشو, المساحة المتروكة لليمين, أسفل الحشو، و المساحة المتروكة لليسار خصائص لتعديل المساحة.

الطبقة الثالثة: الحدود

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

الطبقة الرابعة: الهامش

تُستخدم الطبقة الأخيرة من نموذج الصندوق على نطاق واسع لتوليد مسافة بين العناصر. يلتف الهامش على المحتوى ، والمساحة المتروكة ، ومنطقة الحد. يمكنك استخدام الهامش العلويالهامش الأيمن, الهامش السفلي، و الهامش الأيسر الخصائص. يمكنك أيضًا إعطاء خاصية الهامش قيمة سالبة أو تلقاءي لتحقيق بعض تقنيات التنسيب الرائعة.

إعداد المشروع لنموذج صندوق CSS

دعونا نبني مشروعًا صغيرًا لتوضيح نموذج الصندوق الأساسي باستخدام مربع محتوى وخصائص الحشو والحد والهامش. يمكنك استخدام محتوى نصي أو صورة أو وسائط. سنبدأ بالتأكد من أنه منظم بشكل صحيح.

هيكل مع HTML

انتاج:

يمكنك استخدام الميزات المضمنة في المستعرض الخاص بك ، مثل أدوات مطوري Chromeلمعرفة ما يحدث. نحن نستخدم صورتين من Unsplash. للتبسيط ، سنخفي صورة الهاتف الذكي باستخدام عرض لا شيء؛ حتى نحتاجها لاحقًا.

التصميم باستخدام CSS

/*************************
التصميم الأساسي
*************************/
* {
الهامش: 0 بكسل ؛
الحشو: 0 بكسل ؛
}
هيئة {
عرض: فليكس ؛
الاتجاه المرن: صف.
} 
.عرض {
العرض: لا شيء!
}

الآن ، دعونا نصمم مربع المحتوى الخاص بنا. أولاً ، سنقوم بتعيين ارتفاع و العرض من الصورة. كما أن إعطاء لون للخلفية يساعد في تحسين التصور. لنفعلها اذا.

/*************************
مربع المحتوى
*************************/
.content-box {
عرض: فليكس ؛
الاتجاه المرن: صف.
تبرير المحتوى: مركز ؛
محاذاة العناصر: مركز ؛
/ * تصميم مربع المحتوى باستخدام خصائص الارتفاع والعرض * /
لون الخلفية: #fdf ؛
الارتفاع: 20 م ؛
العرض: 30 م ؛
}

امنح غرفة المحتوى للتنفس بالحشوة

يمكنك إما تعيين أعلى الحشو, المساحة المتروكة لليمين, أسفل الحشو، و المساحة المتروكة لليسار الخصائص بشكل فردي أو استخدام الاختزال. حاول استخدام الاختصار إن أمكن ، حيث يمكن أن يوفر لك بعض الوقت. دعونا نرى كيف تعمل الحشو.

 /*************************
حشوة
*************************/
/ * تطبيق الحشو * /
أعلى الحشو: 5em ؛
المساحة المتروكة لليمين: 2em ؛
الحشو السفلي: 8em ؛
المساحة المتروكة: 2em ؛
/ * اختزال الحشو * /
/ * أعلى / يمين / أسفل / يسار * /
الحشو: 5em 2em 8em 2em ؛
/ * أعلى / أفقي / أسفل * /
الحشو: 5em 2em 8em ؛

انتاج:

ارسم خطوطًا حول المساحة المتروكة باستخدام الحدود

أثناء تطبيق خاصية الحدود ، تأكد من أنك تستخدم امتداد لون الحدود لإعطاء الحدود لونًا مميزًا عن الخلفية. يمكنك تحديد ملف نمط الحدود إما بشكل فردي أو دفعة واحدة باستخدام خاصية الاختزال. الأمر نفسه ينطبق على عرض الحدود خاصية.

يمكنك أيضًا ضبط ملف نصف قطر الحد لإعطاء الصندوق زوايا دائرية بنصف قطر في مقصف, rem, مأو في المائة.

 /*************************
الحدود
*************************/
/ * تطبيق خصائص الحدود * /
/ * ضبط لون الحدود * /
لون الحدود: rgb (148 ، 234 ، 255) ؛
/ * حدد نمط الحدود * /
نمط أعلى الحدود: صلب ؛
نمط يمين الحدود: متقطع ؛
نمط الحد السفلي: أخدود.
نمط يسار الحد: ريدج ؛
/ * اختزال على غرار الحدود * /
/ * أعلى / يمين / أسفل / يسار * /
نمط الحدود: سلسلة أخدود متقطعة صلبة ؛
/ * ضبط عرض الحدود * /
عرض أعلى الحدود: 4em ؛
عرض يمين الحد: 2em ؛
عرض أسفل الحدود: 2em ؛
عرض يسار الحد: 2em ؛
/ * اختصار عرض الحدود * /
/ * أعلى / يمين / أسفل / يسار * /
عرض الحدود: 4em 2em 2em 2em ؛
/ * أعلى / أفقي / أسفل * /
عرض الحدود: 4em 2em 2em ؛
/ * اختزال خاصية الحدود * /
/ * الحدود: 4em rgb صلبة (148 ، 234 ، 255) ؛ */
/ * تعيين نصف قطر الحدود * /
نصف قطر الحدود: 5em ؛
نصف قطر الحدود: 20٪ ؛

انتاج:

أضف مسافة بين الصناديق بالهامش

يمكنك توسيط مربع أفقيًا باستخدام الهامش: 0 تلقائيبشرط أن يكون لها عرض محدد.

 /*************************
هامش
*************************/
/ * تطبيق خصائص الهامش * /
الهامش العلوي: 4em ؛
الهامش الأيمن: 5em ؛
الهامش السفلي: 3em ؛
الهامش الأيسر: 5em ؛
/ * اختزال الهامش * /
/ * أعلى / يمين / أسفل / يسار * /
الهامش: 4em 5em 3em 5em ؛
/ * أعلى / أفقي / أسفل * /
الهامش: 4em 5em 3em ؛
/ * استخدام الهامش التلقائي * /
الهامش: 3em تلقائي ؛

انتاج:

يمكنك تحديد خاصية الهامش باستخدام قيمة واحدة أو اثنتين أو ثلاث أو أربع قيم. يمكن أن تكون القيم طولًا أو نسبة مئوية أو كلمة رئيسية مثل تلقاءي. دعونا نفهم كيف يعمل:

• عندما تحدد قيمة واحدة فقط ، فهذا يعني أن جميع الجوانب الأربعة سيكون لها نفس الهامش.
• عندما تحدد قيمتين ، فإن القيمة الأولى تشير الهامش العلوي و الهامش السفلي بينما تحدد القيمة الثانية الهامش الأيمن و الهامش الأيسر.
• عندما تحدد ثلاث قيم ، تنطبق القيم الأولى والأخيرة على الهامش العلوي و الهامش السفلي على التوالى. القيمة الوسطى للمنطقة الأفقية ، أي الهامش الأيمن و الهامش الأيسر.
• عندما تحدد جميع القيم الأربع ، فإنها تنطبق على الأعلى ، واليمين ، والأسفل ، واليسار (بترتيب اتجاه عقارب الساعة) على التوالي.

لاحظ أنه يمكنك أيضًا استخدام هذه الاختصارات لخصائص المساحة المتروكة والحدود.

أنظر أيضا: ورقة الغش الخاصة بخصائص CSS3 الأساسية

هل سبق لك استخدام الهامش السلبي؟ لتصور ذلك دعونا نمحو عرض لا شيء لعرض صورتنا الثانية ، قم بتعيين هامش سلبي.

/* .عرض {
العرض: لا شيء!
} */
.content-box {
عرض: فليكس ؛
الاتجاه المرن: صف.
محاذاة العناصر: مركز ؛
لون الخلفية: #fdf ؛
الارتفاع: 20 م ؛
العرض: 30 م ؛
الحشو: 5em 2em 8em ؛
نمط الحدود: سلسلة أخدود متقطعة صلبة ؛
عرض الحدود: 4em 2em 2em ؛
نصف قطر الحدود: 20٪ ؛
/ * استخدام الهامش السلبي * /
الهامش: 3em -20em 3em 5em ؛
}

انتاج:

نموذج الصندوق: إنشاء موقع ويب مثالي لـ Pixel

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

يجب أن تفهم أن هناك طرقًا أخرى لتخطيط المحتوى في CSS. وتشمل هذه CSS Grid و CSS Flexbox. بمجرد أن تشعر بالراحة مع نموذج الصندوق ، يجب أن تستمر في التعرف على هذه البدائل.

برنامج CSS Flexbox التعليمي: الأساسيات

ضع عناصر HTML الخاصة بك بشكل مثالي بمساعدة CSS Flexbox.

اقرأ التالي

نبذة عن الكاتب