HTML وCSS / الأساسيات / الدرس 6
نموذج الصندوق والتحجيم والتدفق العادي
افهم المساحة التي يشغلها العنصر واستخدم التدفق العادي قبل التموضع اليدوي.
في هذه الصفحة
أهداف الدرس
- تمييز المناطق الأربع
- حساب صندوق معلوم
- فهم حدود التباعد والتموضع
تمييز المناطق الأربع
يفصل النموذج المحتوى والحشو والحد والهامش. تمتد الخلفية عادة إلى الحشو ولا تشمل الهامش. تصف width مع content-box مساحة المحتوى فتضيف الحدود والحشو إلى الحجم الخارجي، بينما تضمهما border-box ضمن المقاس وفق القواعد العادية. يبقى الهامش خارج الحالتين. حدد القياس قبل مقارنة العرض المحسوب بالصورة؛ فعرض المحتوى وصندوق الحد والمساحة المشغولة أسئلة مختلفة.
ترك التدفق العادي يؤدي عمله
تتتابع صناديق الكتل عادة باتجاه الكتلة، وتشارك العناصر السطرية في الأسطر وتلتف بحسب المساحة. يحدد نمط الكتابة الاتجاهين ولا يعنيان دائما عموديا وأفقيا. تغير display توليد الصندوق ومشاركته لا معنى HTML؛ فيبقى الرابط رابطا لو عرض ككتلة. ابدأ بالتدفق والتباعد بدلا من التموضع المطلق لكل شيء، لأنه يستجيب لالتفاف النص ونمو المحتوى وتغيير حجم الخط.
حساب صندوق معلوم
يعطي المثال صندوقين المقاس نفسه والحشو والحد مع اختلاف box-sizing. في الكتابة الأفقية يكون صندوق content-box الخارجي 248 بكسلا: 200 مع 40 للحشو وثمانية للحد. يبقى border-box الخارجي 200 فيصغر المحتوى. لا توجد هوامش في الحساب. تستخدم القياسات الثابتة لتعليم الحساب فقط، ولا تعني أن 200 بكسل تناسب تخطيطا فعليا متجاوبا.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Box arithmetic</title>
<style>
.box { inline-size: 200px; padding: 20px; border: 4px solid; margin-block: 1rem; }
.content { box-sizing: content-box; }
.border { box-sizing: border-box; }
</style>
</head>
<body>
<main><h1>Two box sizes</h1><div class="box content">Content box</div><div class="box border">Border box</div></main>
</body>
</html>
Border-box widths: 248px and 200px under horizontal writing.عرض صندوق الحد الأول 248 بكسل CSS والثاني 200، والهوامش منفصلة عن الحساب. النتيجة المتوقعة: عرضا صندوق الحد 248px و200px في الكتابة الأفقية.
القيود المرنة والتجاوز
يحد أقصى العرض الأسطر الطويلة ويسمح بالتقلص. يستخدم المثال border-box ونسبة مع حد أعلى حتى لا يزيد الحشو العرض المطلوب. يحتاج النص غير المقطوع سياسة مثل overflow-wrap: anywhere حيث يسمح المعنى. يخفي overflow: hidden المحتوى وقد يقص عناصر مهمة، فلا يصلح علاجا عاما. وقد يكون التمرير مقصودا كجدول محلي. حدد ما يلتف وما يتمرر وما يبقى متصلا، واحفظ الوصول إلى المعلومات.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flexible box</title>
<style>
.panel { box-sizing: border-box; inline-size: 100%; max-inline-size: 40rem; padding: 1rem; border: 2px solid #444; overflow-wrap: anywhere; }
</style>
</head>
<body>
<main><h1>Flexible reading</h1><p class="panel">Averylongsyntheticreferencewithoutspaces1234567890 can wrap when needed.</p></main>
</body>
</html>
A bounded flexible panel whose long token can wrap.تلائم اللوحة المساحة حتى الحد الأعلى ويمكن تقسيم الرمز الطويل بدلا من توسيع الصفحة. النتيجة المتوقعة: لوحة مرنة محدودة يلتف رمزها الطويل.
فهم حدود التباعد والتموضع
قد تنهار هوامش كتل متجاورة ضمن شروط محددة؛ فلا تجمع دائما. توفر gap في flex وgrid تباعدا مختلفا صريحا. يحرك relative الصندوق مع إبقاء مكانه، ويخرجه absolute من التدفق ويستخدم كتلة احتواء تحددها القواعد. تناسب الأداتان التراكبات والتثبيت المقصود لا تخطيط الصفحة كله. افحص كتلة الاحتواء وسياق التكديس، واختبر زيادة النص ونقص العناصر وضيق العرض لكشف افتراضات الأبعاد.
الأخطاء الشائعة وإصلاحها
تتجاوز لوحة 100% عرض أبيها
- لماذا يحدث؟
- أضيف الحشو والحد إلى content-box.
- كيف تصلحه؟
- استخدم border-box المناسب.
- كيف تتجنب تكراره؟
- احسب الصندوق كاملا.
لا يمكن الوصول بصريا إلى حقل مقصوص
- لماذا يحدث؟
- أخفى التجاوز المحتوى بدل إصلاح الحجم.
- كيف تصلحه؟
- أصلح الحجم واحفظ التجاوز القابل للاستخدام.
- كيف تتجنب تكراره؟
- افحص العناصر بعد تغيير overflow.
يتراكب النص بعد تكبير الخط
- لماذا يحدث؟
- افترضت الإحداثيات أبعادا ثابتة.
- كيف تصلحه؟
- أعد المحتوى للتدفق أو تخطيط مرن.
- كيف تتجنب تكراره؟
- اختبر نمو المحتوى والتكبير.
اختبر فهمك
1. احسب عرض صندوق الحد مع width 300px وحشو 12px وحد 2px في كل جانب وفق content-box.
اعرض الحل المشروح
يساوي 300 + 24 + 4 = 328 بكسل CSS. يضاف الهامش خارجيا. ومع border-box والمقاس نفسه يبقى الخارج عادة 300 ويصير المحتوى 272 بكسلا.
2. يوسع معرف طويل بطاقة ضيقة. ماذا تفحص قبل الإخفاء؟
اعرض الحل المشروح
افحص حجم البطاقة والحد الأدنى لدى الأب وجواز تقسيم المعرف. اسمح بالالتفاف أو تمرير محلي مقصود إذا لزم حفظه متصلا. قد يزيل الإخفاء بيانات مهمة ولا يفسر ضغط الحجم الأدنى.
أهم ما تعلمته
- حدد الصندوق المقيس قبل الحساب.
- يعالج التدفق المحتوى المتغير طبيعيا.
- يجب أن تحفظ سياسة التجاوز الوصول.