0Pricing
CSS Academy · درس

العروض المرنة باستخدام النسب المئوية

استخدم عروضًا مبنية على النسب المئوية لإنشاء تخطيطات تتوسع مع حاويتها.

العروض المرنة باستخدام النسب المئوية درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

لماذا نستخدم العروض المرنة؟

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

أساسيات العرض بالنسبة المئوية

يكون العرض بالنسبة المئوية نسبيًا إلى عرض الحاوية الأصل. وسيكون عرض العنصر الابن الذي يملك width: 50% دائمًا نصف عرض العنصر الأصل.

<div style="width:300px;border:1px dashed #999;padding:4px;">
  <div class="half-width" style="background:#4f8cff22;border:1px solid #4f8cff;">width: 50%</div>
  <div class="third-width" style="background:#ffb84d22;border:1px solid #ffb84d;">width: 33.333%</div>
</div>

النسبة المئوية وتحديد حجم الصندوق

مع box-sizing: border-box، تتضمن العروض بالنسبة المئوية الحشو والحدود. وهذا يجعل الأعمدة ذات النسب المئوية سهلة، إذ تمثل 50% نصف العرض فعلًا، بصرف النظر عن الحشو.

<div style="width:300px;border:1px dashed #999;">
  <div class="col-half" style="background:#4f8cff22;border:1px solid #4f8cff;">50% including padding/border</div>
</div>

تخطيط مرن من عمودين

تخطيط مرن بسيط يعتمد على float (قديم):

<div style="width:100%;overflow:auto;">
  <div class="col" style="background:#4f8cff22;border:1px solid #4f8cff;">Column A</div>
  <div class="col" style="background:#ffb84d22;border:1px solid #ffb84d;">Column B</div>
</div>

أعمدة Flexbox المرنة

يكون استخدام Flexbox لتخطيطات الأعمدة المرنة أكثر بساطة:

<div class="flex-row">
  <div class="col-main" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Main (flex: 2)</div>
  <div class="col-side" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Side (flex: 1)</div>
</div>

الحشو بالنسبة المئوية

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

<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>

نسبة العرض إلى الارتفاع الحديثة

تحل الخاصية aspect-ratio محل حيلة الحشو للحفاظ على نسب العرض إلى الارتفاع:

<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>

max-width مع التخطيط المرن

يمنع دمج العروض بالنسبة المئوية مع max-width زيادة عرض الأسطر أكثر من اللازم على الشاشات الكبيرة:

<article class="article" style="background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">Article column — 90% wide, capped at 800px, centered</article>

مشكلة الارتفاع بالنسبة المئوية

يتطلب الارتفاع بالنسبة المئوية أن يكون للعنصر الأصل ارتفاع محدد. فإذا كان للعنصر الأصل height: auto، فستُحسب الارتفاعات بالنسبة المئوية للعناصر الأبناء باعتبارها auto أيضًا.

الكلمات المفتاحية للتحجيم الذاتي

يضيف CSS الحديث خيارات أكثر مرونة لتحديد الأحجام:

  • min-content: أصغر حجم يتسع للمحتوى
  • max-content: حجم يتسع للمحتوى بالكامل في سطر واحد
  • fit-content: حجم يقع بين min-content وmax-content
<span class="tag" style="background:#4f8cff22;border:1px solid #4f8cff;display:inline-block;">Tag</span>

نمط الشبكة المرنة

شبكة مرنة شائعة باستخدام inline-block (أسلوب قديم) أو CSS الحديث:

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;min-height:60px;">A</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;min-height:60px;">B</div>
  <div style="background:#7ee78722;border:1px solid #34c759;min-height:60px;">C</div>
</div>

تحقق سريع

حاوية أب بعرض 600px. لدى عنصر الابن width: 60% وpadding: 20px (مع box-sizing: border-box). ما عرض محتوى العنصر الابن؟

مراجعة

تنشئ العروض المئوية تخطيطات مرنة تتكيف مع حاويتها الأب. ادمجها مع max-width لمنع المحتوى من أن يصبح عريضًا أكثر من اللازم. استخدم aspect-ratio مع الوسائط المتجاوبة. يتعامل Flexbox وGrid مع الأعمدة المرنة بطريقة أكثر أناقة من العوامات ذات النسب المئوية.

الأسئلة الشائعة

هل درس «العروض المرنة باستخدام النسب المئوية» مجاني؟

نعم — نص درس «العروض المرنة باستخدام النسب المئوية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «العروض المرنة باستخدام النسب المئوية»؟

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

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «العروض المرنة باستخدام النسب المئوية»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. منهج الهاتف أولًا مقابل سطح المكتب أولًا
  2. العروض المرنة باستخدام النسب المئوية
  3. أنماط Min-Width وMax-Width
  4. الصور المتجاوبة وعنصر Picture
← العودة إلى CSS Academy